怎么点击按钮 只显示当前的要显示的div

 $(".total-scope-tan").toggle();=》$(this).find(".total-scope-tan").toggle();

解决方案 »

  1.   

    $(".total-scope-tan").toggle();
    toggle
      

  2.   

    $(document).ready(function() { $(".total-scope").each(function(){
    $(this).click(function(){
    console.log($(this))
    $(".total-scope-tan").hide();
    $(this).find('.total-scope-tan').show();
    })
    })
       });
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript"> $(function () {
    $(".total-scope").each(function(){
    $(this).click(function(){
    $(".total-scope-tan").hide();
    $(this).children('.total-scope-tan').show();
    })
    })

    });    </script>
        <style type="text/css">
      *{margin: 0;
          padding: 0;
      }
       .total-scope {
      width: 118px;
      height: 20px;
      border: 1px solid #DCDCDC;
      background: #F6F6F6;
      float: left;
      line-height: 20px;
      margin: 7px 0 0 10px;
      display: inline;
      cursor: pointer;
      position: relative;
    }
    .total-scope .total-scope-tan{
      width: 118px;
      border: 1px solid #DCDCDC;
      border-top: 0;
      border-bottom: 0;
      background: #FFF;
      position: absolute;
      top:21px;
      left: -1px;
      z-index: 99;
      display: none;
    }
    .total-scope-tan a{
      width: 118px;
      height: 20px;
      display: inline-block;
      border-bottom: 1px solid #DCDCDC;
      color: #7D7D7D;
      line-height: 20px;
      text-align: center;
    }
    .total-scope-tan a:hover{
      background: #F6F6F6;
      color: #E64545;
    }
        </style>
    </head>
    <body>
         
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
    </body>
    </html>
      

  4.   

    $(".total-scope").each(function(){
                $(this).click(function(){
                    console.log($(this))
                    $(".total-scope-tan").hide();
                    $(this).find('.total-scope-tan').toggle();
                    $(document).one("click", function () {//对document绑定一个隐藏Div方法
                        $(".total-scope-tan").hide();
                    });
                    event.stopPropagation();//阻止事件向上冒泡
                });
                $(".total-scope-tan").click(function (event) {
                    event.stopPropagation();//阻止事件向上冒泡
                });
                })
    请问下 toggle()不起作用是怎么回事
      

  5.   

    把$(".total-scope-tan").hide();改成$(this).siblings('.total-scope').find('.total-scope-tan').hide();
      

  6.   

      $(".total-scope-tan").hide();//该句删掉，没必要，直接利用下面的toggle即可
                    $(this).find('.total-scope-tan').toggle();
      

  7.   

    $(function () {
                $(".total-scope").find("span").click(function () {
                    $(this).next().toggle();
                });
            })
      

  8.   

    请问下 你这样toggle有效果 可是当我点击第二个total-scope 第一个显示的total-scope-tan没有隐藏 请问下应该这么做啊
      

  9.   


    $(document).ready(function() {
       
       $(".total-scope").each(function(){
                $(this).click(function(event){
                    console.log($(this))
                    $(this).siblings('.total-scope').find('.total-scope-tan').hide(); 
                    $(this).find(".total-scope-tan").show();
                    $(document).one("click", function () {//对document绑定一个隐藏Div方法
                        $(".total-scope-tan").hide();
                    });
                    event.stopPropagation();//阻止事件向上冒泡
                });
                $(".total-scope-tan").click(function (event) {
                    event.stopPropagation();//阻止事件向上冒泡
                });
                })
       });请问下 改成这样还是没有toggle效果
      

  10.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function() { $(".total-scope").each(function(){
    $(this).click(function(){
    $(this).siblings('.total-scope').find('.total-scope-tan').hide();
    $(this).find('.total-scope-tan').toggle();
    })
    })
       });
    </script>
    <style type="text/css">
      *{margin: 0;
       padding: 0;
      }
       .total-scope {
      width: 118px;
      height: 20px;
      border: 1px solid #DCDCDC;
      background: #F6F6F6;
      float: left;
      line-height: 20px;
      margin: 7px 0 0 10px;
      display: inline;
      cursor: pointer;
      position: relative;
    }
    .total-scope .total-scope-tan{
      width: 118px;
      border: 1px solid #DCDCDC;
      border-top: 0;
      border-bottom: 0;
      background: #FFF;
      position: absolute;
      top:21px;
      left: -1px;
      z-index: 99;
      display: none;
    }
    .total-scope-tan a{
      width: 118px;
      height: 20px;
      display: inline-block;
      border-bottom: 1px solid #DCDCDC;
      color: #7D7D7D;
      line-height: 20px;
      text-align: center;
    }
    .total-scope-tan a:hover{
      background: #F6F6F6;
      color: #E64545;
    }
    </style>
    </head>
    <body>

    <div class="total-scope">
    <span>最近7天</span>
    <div class="total-scope-tan">
    <a href="#">最近6天</a>
    <a href="#">最近5天</a>
    <a href="#">最近4天</a>
    </div>
    </div>
    <div class="total-scope">
    <span>最近7天</span>
    <div class="total-scope-tan">
    <a href="#">最近6天</a>
    <a href="#">最近5天</a>
    <a href="#">最近4天</a>
    </div>
    </div>
    <div class="total-scope">
    <span>最近7天</span>
    <div class="total-scope-tan">
    <a href="#">最近6天</a>
    <a href="#">最近5天</a>
    <a href="#">最近4天</a>
    </div>
    </div>
    </body>
    </html>你用这个测试 我这是没问题的啊
      

  11.   

    是的 没有问题<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
       $(document).ready(function() {
     
            $(".total-scope").each(function(){
                $(this).click(function(event){
                    $(this).siblings('.total-scope').find('.total-scope-tan').hide();
                    $(this).find('.total-scope-tan').toggle();
    $(document).one("click", function () {//对document绑定一个影藏Div方法
                        $('.total-scope-tan').hide();
                    });
                    event.stopPropagation();//阻止事件向上冒泡
                })
    $('.total-scope-tan').click(function (event) {
                    event.stopPropagation();//阻止事件向上冒泡
                });
            })
       });
        </script>
        <style type="text/css">
      *{margin: 0;
          padding: 0;
      }
       .total-scope {
      width: 118px;
      height: 20px;
      border: 1px solid #DCDCDC;
      background: #F6F6F6;
      float: left;
      line-height: 20px;
      margin: 7px 0 0 10px;
      display: inline;
      cursor: pointer;
      position: relative;
    }
    .total-scope .total-scope-tan{
      width: 118px;
      border: 1px solid #DCDCDC;
      border-top: 0;
      border-bottom: 0;
      background: #FFF;
      position: absolute;
      top:21px;
      left: -1px;
      z-index: 99;
      display: none;
    }
    .total-scope-tan a{
      width: 118px;
      height: 20px;
      display: inline-block;
      border-bottom: 1px solid #DCDCDC;
      color: #7D7D7D;
      line-height: 20px;
      text-align: center;
    }
    .total-scope-tan a:hover{
      background: #F6F6F6;
      color: #E64545;
    }
        </style>
    </head>
    <body>
    <div style="float:left;"> 
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
    </div>
    <div style="float:left;"> 
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
    </div>
    <div style="float:left;"> 
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
    </div>
    </body>
    </html>麻烦帮我看看这个 这个外面又包了div 就不起作用了 请问是怎么回事
      

  12.   

    是因为你的结构改了 对应的语句也要跟着改
    $(this).parent().siblings('div').find('.total-scope-tan').hide();
      

  13.   

    你可以考虑如下实现，而不用去管外层的嵌套结构
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
       $(document).ready(function() {
     
            $(".total-scope").each(function(index, element){
                $(this).click(function(event){
                    $('.total-scope-tan:not(:eq('+index+'))').hide();
                    $(this).find('.total-scope-tan').toggle();
    $(document).one("click", function () {//对document绑定一个影藏Div方法
                        $('.total-scope-tan').hide();
                    });
                    event.stopPropagation();//阻止事件向上冒泡
                })
    $('.total-scope-tan').click(function (event) {
                    event.stopPropagation();//阻止事件向上冒泡
                });
            })
       });
        </script>
        <style type="text/css">
      *{margin: 0;
          padding: 0;
      }
       .total-scope {
      width: 118px;
      height: 20px;
      border: 1px solid #DCDCDC;
      background: #F6F6F6;
      float: left;
      line-height: 20px;
      margin: 7px 0 0 10px;
      display: inline;
      cursor: pointer;
      position: relative;
    }
    .total-scope .total-scope-tan{
      width: 118px;
      border: 1px solid #DCDCDC;
      border-top: 0;
      border-bottom: 0;
      background: #FFF;
      position: absolute;
      top:21px;
      left: -1px;
      z-index: 99;
      display: none;
    }
    .total-scope-tan a{
      width: 118px;
      height: 20px;
      display: inline-block;
      border-bottom: 1px solid #DCDCDC;
      color: #7D7D7D;
      line-height: 20px;
      text-align: center;
    }
    .total-scope-tan a:hover{
      background: #F6F6F6;
      color: #E64545;
    }
        </style>
    </head>
    <body>
    <div style="float:left;"> 
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
    </div>
    <div style="float:left;"> 
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
    </div>
    <div style="float:left;"> 
        <div class="total-scope">
            <span>最近7天</span>
            <div class="total-scope-tan">
                <a href="#">最近6天</a>
                <a href="#">最近5天</a>
                <a href="#">最近4天</a>
            </div>
        </div>
    </div>
    </body>
    </html>
      

  14.   

    请问下 $(this).find('.total-scope-tan').toggle(); 在ie7 8下不起作用 是怎么回事啊