Jquery टॉगल (दूसरों को छुपाते समय एक div दिखाने के लिए क्लिक करें)

Question

मूल विचार यह है कि मेरे पास div का एक समूह है जिसमें प्रत्येक को टॉगल किया जा सकता है (दिखाएं/छुपाएं)।

जब एक div टॉगल किया जाता है तो मैं अन्य div के लिए चाहूंगा जो वर्तमान में छिपाने के लिए दिखाए जा रहे हैं, इस प्रकार केवल एक ही div को एक समय में दिखाया जा सकता है।

इसके अतिरिक्त मैं खुले div को छिपाने के लिए तत्व के बाहर क्लिक करने में सक्षम होना चाहता हूं।

बस चीजों को स्पष्ट करने के लिए मैंने एक उदाहरण प्रदान किया जो वर्तमान में जो कुछ भी मैं चाहता हूं वह एक खोलने के बाद एक div को बंद करने के अलावा (एक समय कार्यक्षमता में केवल एक div खुला) को छोड़कर।

http://jsfiddle.net/walker2238/NFTFw/27/

अद्यतन: हल समस्या सुझाव के लिए धन्यवाद और समय देने के लिए मुझे मदद करने के लिए।

Answer 1

http://jsfiddle.net/NFTFw/29/

में हल आप मूल रूप से सिर्फ एक टॉगल किया जा रहा छोड़कर सभी divs को छिपाने के लिए की जरूरत है।

Answer 2

यह कोड अतिरिक्त पुस्तकालयों के उपयोग के बिना चाल करना चाहिए। :)

http://jsfiddle.net/NFTFw/42/

$(document).ready(function(){ 

    var dd = $(".dropdown-container"); 

    $("a.dropdown-link").click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    dd.hide(); 
    $(this).next().show(); 
    }); 

    $(document).click(function() { 
    dd.hide(); 
    }); 

    dd.click(function(e) { 
    e.stopPropagation(); 
    }); 
}); 

Answer 3

इस बेला देखें ...

http://jsfiddle.net/SDaCu/1/

Answer 4

ये रहा:

$("a.dropdown-link", $dropdown).click(function(e) { 
    e.preventDefault(); 
    $(".dropdown-container").hide(); 
    $("div.dropdown-container", $dropdown).toggle(); 
    return false; 
}); 

नोट जोड़ा पंक्ति:

$(".dropdown-container").hide(); 

हम जो div चाहते हैं उसे टॉगल करने से पहले हम सभी चीजों को छुपाएं।

Answer 5

निम्नलिखित का प्रयास करें:

$(document).ready(function(){ 

    $("a.dropdown-link").click(function(e) { 
    e.preventDefault(); 
    var $div = $(this).next('.dropdown-container'); 
    $(".dropdown-container").not($div).hide(); 
    if ($div.is(":visible")) { 
     $div.hide() 
    } else { 
     $div.show(); 
    } 
}); 

    $(document).click(function(e){ 
     var p = $(e.target).closest('.dropdown').length 
     if (!p) { 
      $(".dropdown-container").hide(); 
     } 
    }); 

}); 

DEMO

Answer 6

$(document).ready(function(){ 

     $('div.dropdown').each(function() { 
     var $dropdown = $(this); 

     $("a.dropdown-link", $dropdown).click(function(e) { 
      e.preventDefault(); 
      $("div.dropdown-container").hide(); 
      if($("div.dropdown-container", $dropdown).hide()){ 
       $("div.dropdown-container", $dropdown).show(); 
      }else{ 
       $("div.dropdown-container", $dropdown).hide(); 
      } 
      return false; 
     }); 

    }); 

     $('html').click(function(){ 
     $("div.dropdown-container").hide(); 
     }); 

    }); 

http://jsfiddle.net/NFTFw/40/

Answer 7

मैं इसे के रूप में संभव के रूप में कम कर दिया! हैप्पी कोडिंग!

$(document).ready(function(){ 
    $(document).on("click", "a", function(event){ 
    $(this).siblings().show() 
    $(this).parent().siblings().each(function(index,element){ 
     $(element).find(".dropdown-container:visible").hide(); 
    }); 
    }); 
}); 

डेमो: http://jsfiddle.net/NFTFw/60/

Answer 8

आप नीचे दिए गए कोड का उपयोग करके लागू करने के लिए स्मार्ट और आसान तरीका द्वारा उपयोग कर सकते हैं:

<div id="dropdown-1" class="dropdown dropdown-processed"> 
    <a class="dropdown-link" href="#">Options</a> 
    <div class="dropdown-container" style="display: none;"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
    </div> 
</div> 

<div id="dropdown-2" class="dropdown dropdown-processed"> 
    <a class="dropdown-link" href="#">Options</a> 
    <div class="dropdown-container" style="display: none;"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
    </div> 
</div> 

<div id="dropdown-3" class="dropdown dropdown-processed"> 
    <a class="dropdown-link" href="#">Options</a> 
    <div class="dropdown-container" style="display: none;"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
    </div> 
</div> 

---

$(document).ready(function(){ 
 

 
$(".dropdown-link").click(function(){ 
 
$(".dropdown-container").slideUp('slow') 
 
$(this).closest('.dropdown').find('.dropdown-container').slideDown('slow'); 
 
    
 
}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dropdown-1" class="dropdown dropdown-processed"> 
 
    <a class="dropdown-link" href="#">Options</a> 
 
    <div class="dropdown-container" style="display: none;"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div id="dropdown-2" class="dropdown dropdown-processed"> 
 
    <a class="dropdown-link" href="#">Options</a> 
 
    <div class="dropdown-container" style="display: none;"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div id="dropdown-3" class="dropdown dropdown-processed"> 
 
    <a class="dropdown-link" href="#">Options</a> 
 
    <div class="dropdown-container" style="display: none;"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
    </ul> 
 
    </div> 
 
</div>

कार्य उदाहरण लिंक: http://jsfiddle.net/NFTFw/1901/