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();
    });
});

<强> DEMO HERE

您不需要这么多代码。此代码会隐藏/显示之前.span9点击的.span3。

我在jQuery中添加了$('.span9').hide();但更好的是在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();
    });
});

jQuery显示一个隐藏所有div

4 个答案: