jquery - jQuery 显示一个隐藏所有 div

Question

好吧，在看了很多关于 SO 的帖子之后，我仍然无法找到我要去的地方。我的代码没有变化。它仍然显示每个数据。我希望<div class="span9">在选择链接时隐藏数据<div class="span3">

我哪里错了？

<div class="row">
   <div class="span9" id = "4_2">
      hello<br>
      How are you????
      2013-08-06 14:33:16
    </div> <!--end of div class span9 -->
    <div class="span3">      
         <a href="#" class = "dropdown-link">mithila</a>
    <div> <!--end of div span3-->

    <div class="span9" id = "1_1">
       My name is praful<br>
       2013-08-06 14:22:17
    </div> <!--end of div class span9 -->

     <div class="span3">
        <a href="#" class = "dropdown-link">mithila</a>
     </div> <!--end of div span3-->
</div><!--end of div row-->

jQuery

$(document).ready(function(){

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

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

});

  $('html').click(function(){
    $("div.span9").hide();
  });

});

Answer 1

$(document).ready(function () {
    $('.span9').hide();  // I put this here but best is to have it in CSS
    $(".span3").click(function () {
        $('.span9').hide();
        $(this).prev('.span9').show();
    });
});

在这里演示

你不需要那么多代码。此代码将隐藏/显示之前.span9单击的.span3.

我$('.span9').hide();在 jQuery 中添加，但更好的是在 CSS 中添加，.span9 {dislay:none;}这样它们从一开始就隐藏起来。

Answer 2

我不确定您的 Jquery 代码是什么样的，但也许可以尝试这样的事情？

    $('.span3').on('click', 'a', function(){
        $('.span9').hide();
    });

Answer 3

添加点击处理程序，防止默认链接跟随，隐藏 span9 div：

$(document).ready(function () {
    $('.row').on('click', 'a.span3', function (e) {
        e.preventDefault();
        $("div.span9").hide();
    });
});

剩下的代码，删除？

工作示例：http: //jsfiddle.net/zsnp5/

Answer 4

您的一些 HTML 是错误的，请在此处查看 HTML 和 jQuery 的工作示例：

http://jsfiddle.net/alutz33/KrgnT/1/

<div class="row">
<div id="4_2" class="span9">hello<br />How are you???? 2013-08-06 14:33:16</div>
<!--end of div class span9 -->
<div class="span3"> <a href="#" class="dropdown-link">mithila</a>

</div>
<!--end of div span3-->
<div class="span9" id="1_1">My name is praful
    <br>2013-08-06 14:22:17</div>
<!--end of div class span9 -->
<div class="span3"> <a href="#" class="dropdown-link">mithila</a>

</div>
<!--end of div span3-->

$(document).ready(function () {
    $('.span3').on('click', 'a', function () {
        $(".span9").hide();
    });
});