मैं सीएसएस एचटीएमएल और थोड़ा सा jQuery के साथ एक उत्तरदायी मेनू बनाने की कोशिश कर रहा हूं, मैंने मेनू को खोलने या बंद करने के लिए सीएसएस के साथ एक चेकबॉक्स का उपयोग किया, जब भी मैं किसी भी एंकर पर क्लिक करता हूं तो मैं मेनू को बंद करना चाहता हूं, (यह काम करता है) लेकिन अगर मैं इसे खोलने के लिए फिर से मेनू आइकन पर क्लिक करता हूं तो यह हर बार धीरे-धीरे काम करता है जब तक कि इसे प्रदर्शित होने में बहुत अधिक समय न लगे।

मुझे लगता है कि समस्या क्लिक इवेंट हैं लेकिन मुझे नहीं पता कि इसे कैसे हल किया जाए।

आपकी सहायता के लिए धन्यवाद

$(document).ready(function() {
  click_events();
});

function click_events() {
  $("#menu ul li a").click(function() {
    $(this).parent().parent().parent().animate({
      "margin-left": "-100%"
    });
    $("#btn-menu").prop("checked", false);
    $("label").click(function() {
      if ($("#btn-menu").prop("checked", true)) {
        $("#menu").animate({
          "margin-left": "0"
        });
      }
    })
  });
}

एचटीएमएल

<header class="header">
  <div class="container">
    <div class="img-logo-container">
      <img src="images/logo.png" alt="">
    </div>
    <input type="checkbox" id="btn-menu">
    <label for="btn-menu"><i class="fas fa-bars"></i></label>
    <nav class="menu" id="menu">
      <ul>
        <li><a href="#episodes">Episodios</a></li>
        <li><a href="#invited">Invitados</a></li>
        <li><a href="#topics">Temas</a></li>
        <li><a href="#new">Novedades</a></li>
      </ul>
    </nav>
  </div>
</header>

सीएसएस

@media screen and (max-width: 991px) {
  header label {
    display: block;
  }
  header nav {
    position: fixed;
    background: #ffffff;
    z-index: 1000;
    width: 100%;
    left: 0;
    top: 70px;
    height: 100vh;
    overflow-y: auto;
    margin-left: -100%;
  }
  #btn-menu:checked~.menu {
    margin-left: 0;
    transition: 0;
  }
  #btn-menu:not(:checked)~.menu {
    margin-left: -100%;
    transition: 0;
  }
  header nav ul li {
    display: block;
    text-align: center;
    border-bottom: 1px solid black;
    padding: 20px 0;
    margin-left: 15px;
    margin-right: 15px;
  }
  #btn-menu:checked~.menu {
    display: block;
    width: 100%;
  }
}
0
J P 13 पद 2019, 21:53
क्योंकि आप हर बार #menu ul li a क्लिक होने पर किसी अन्य क्लिक ईवेंट को label से बाइंड करते हैं - आपको इसे एक बार बाइंड करने की आवश्यकता है, एक क्लिक ईवेंट पर्याप्त है
 – 
Alon Eitan
13 पद 2019, 22:05
4
कृपया अपना HTML शामिल करें ताकि हम आपकी समस्या को समझ सकें, आप एक कार्यशील स्निपेट भी जोड़ सकते हैं
 – 
Alon Eitan
13 पद 2019, 22:07
एलोन सही है, साथ ही आप एक ';' खो रहे हैं आपके लेबल क्लिक फ़ंक्शन के बाद। मैं इसके बजाय if($("#btn-menu").is(':checked') विधि का उपयोग करूंगा, लेकिन यह आवश्यक नहीं है।
 – 
timpng1
13 पद 2019, 22:16
नमस्ते मैंने थोड़ा स्पष्ट करने के लिए html और कुछ css कोड जोड़े हैं
 – 
J P
14 पद 2019, 01:00

1 उत्तर

ऐसा इसलिए हो रहा है क्योंकि आप हर बार #menu ul li a क्लिक करने पर label के click इवेंट को बाइंड करते हैं। समाधान यह होगा कि बाइंडिंग को click handler से बाहर ले जाया जाए।

तो इसके बजाय

function click_events() {
  $("#menu ul li a").click(function() {
    $(this).parent().parent().parent().animate({
      "margin-left": "-100%"
    });
    $("#btn-menu").prop("checked", false);
    $("label").click(function() {
      if ($("#btn-menu").prop("checked", true)) {
        $("#menu").animate({
          "margin-left": "0"
        });
      }
    })
  });
}

यह होना चाहिए

function click_events() {
  $("#menu ul li a").click(function() {
    $(this).parent().parent().parent().animate({
      "margin-left": "-100%"
    });
    $("#btn-menu").prop("checked", false);
  });
  $("label").click(function() {
    if ($("#btn-menu").prop("checked", true)) {
      $("#menu").animate({
        "margin-left": "0"
      });
    }
  })
}
1
Mosh Feu 14 पद 2019, 01:47