मैं जावास्क्रिप्ट के साथ एक div दिखाने की कोशिश कर रहा हूं, लेकिन जैसा कि शीर्षक कहता है, यह दिखाने के लिए 2 क्लिक ले रहा है। यहां वह कोड है जिसका मैं उपयोग कर रहा हूं, और जेएस को उसी फ़ाइल पर <script> टैग के साथ बुलाया जा रहा है:

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<div id="mobile-search" class="mobile-search">
  <input type="search" name="">
</div>

<button class="search-btn" id="mobile-search-button" onclick="show_search()">
    <i class="fa fa-search" aria-hidden="true"></i>
</button>

<style>
  .mobile-search {
    display: none;
  }
</style>

<script type="text/javascript">
  var mobile_search = document.getElementById("mobile-search");

  function show_search() {
    if (mobile_search.style.display === "none") {
      mobile_search.style.display = "block";
    } else {
      mobile_search.style.display = "none";
    }
  }
</script>

जैसा कि आप देख सकते हैं, डिव दिखाने में 2 क्लिक लग रहे हैं, और मैं चाहता हूं कि यह केवल 1 हो। क्या चल रहा है?

2
Sam 26 सितंबर 2020, 09:46

2 जवाब

जब आपके पास पहले से ही mobile-search को छिपाने के लिए एक क्लास है, तो उसे टॉगल क्यों न करें:

var toggle = document.getElementById("mobile-search-button");
var classes = document.getElementById("mobile-search").classList;

toggle.addEventListener("click", function() {
  classes.contains("mobile-search") ? classes.remove("mobile-search") : classes.add("mobile-search");
});
.mobile-search {
  display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="mobile-search" class="mobile-search">
  <input type="search" name="">
</div>

<button class="search-btn" id="mobile-search-button">
    <i class="fa fa-search" aria-hidden="true"></i>
</button>
0
Pranav Rustagi 26 सितंबर 2020, 10:13

शैली संपत्ति सीएसएस से शैलियों को वापस नहीं करती है। आपकी स्थिति के अनुसार जब आप बटन पर क्लिक कर रहे हैं तो यह डिस्प्ले जोड़ रहा है: कोई नहीं, दूसरी बार क्लिक करने के बाद यह डिस्प्ले: ब्लॉक जोड़ रहा है, इसलिए आपको div दिखाने के लिए दो बार क्लिक करने की आवश्यकता है।

इसे आप दो तरह से ट्राई कर सकते हैं।

चरण 1: बस टॉगल करें ब्लॉक करें और क्लिक फ़ंक्शन पर कोई नहीं

var toggle  = document.getElementById("mobile-search-button");
var content = document.getElementById("mobile-search");

toggle.addEventListener("click", function() {
  content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});
.mobile-search {
    display: none;
  }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="mobile-search" class="mobile-search">
  <input type="search" name="">
</div>

<button class="search-btn" id="mobile-search-button">
    <i class="fa fa-search" aria-hidden="true"></i>
</button>

चरण 2:

आपको किसी css की आवश्यकता नहीं है, अपने इनपुट बॉक्स में स्टाइल जोड़ें।

var mobile_search = document.getElementById("mobile-search");

  function show_search() {
    if (mobile_search.style.display === "none") {
      mobile_search.style.display = "block";
    } else {
      mobile_search.style.display = "none";
    }
  }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="mobile-search" class="mobile-search" style="display: none">
  <input type="search" name="">
</div>

<button class="search-btn" id="mobile-search-button" onclick="show_search()">
    <i class="fa fa-search" aria-hidden="true"></i>
</button>

चरण: अतिरिक्त

आप इसे और भी आसान तरीके से कर सकते हैं। बस टॉगल क्लास ऑनक्लिक

$("#mobile-search-button").on("click", function(){
  $("#mobile-search").toggle();        
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search" style="display: none">
  <input type="search" name="">
</div>

<button class="search-btn" id="mobile-search-button">
    <i class="fa fa-search" aria-hidden="true"></i>
</button>
0
Mehedi Hasan Siam 26 सितंबर 2020, 10:07