对具有相同类名而不是当前所选按钮的所有按钮触发Jquery事件

时间：2016-06-11 07:00:55

标签： javascript jquery html

基本上当我点击第一个.menu-btn时，它应该首先被调用.dropdown 请注意，此内容是动态生成的，因此我无法为所有

使用不同的ID

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".menu-btn").click(function() {
    $(".dropdown").toggleClass('expand');
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped">
  <tr>
    <th>&nbsp;</th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>
      <div class="mobile-nav" style="border:0px solid red">
        <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="dropdown">
          <ul class="list">
            <li>
              <button>Btn1</button>
            </li>
            <li>
              <button>Btn2</button>
            </li>
            <li>
              <button>Btn3</button>
            </li>
            <li>
              <button>Btn4</button>
            </li>
          </ul>
        </div>
      </div>
    </td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr>
    <td>
      <div class="mobile-nav" style="border:0px solid red">
        <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="dropdown">
          <ul class="list">
            <li>
              <button>Btn1</button>
            </li>
            <li>
              <button>Btn2</button>
            </li>
            <li>
              <button>Btn3</button>
            </li>
            <li>
              <button>Btn4</button>
            </li>
          </ul>
        </div>
      </div>
    </td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr>
    <td>
      <div class="mobile-nav" style="border:0px solid red">
        <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="dropdown">
          <ul class="list">
            <li>
              <button>Btn1</button>
            </li>
            <li>
              <button>Btn2</button>
            </li>
            <li>
              <button>Btn3</button>
            </li>
            <li>
              <button>Btn4</button>
            </li>
          </ul>
        </div>
      </div>
    </td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您可以使用siblings方法定位即时.drop-down 

$(document).ready(function(){
            $(".menu-btn").click(function(){
                $(this).siblings(".dropdown").toggleClass('expand');
            });
      });

答案 1 :(得分：1)

像这样使用

<html>
  <head>
    <style>
        .dropdown{display:none;}
        .expand{display:block;}
    </style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
        $(".menu-btn").click(function(){
            $(this).parent().find(".dropdown").toggleClass('expand');
        });
     });
	</script>
  </head>
    <body>

	
	<table class="table table-striped" width="100%">
        <tr>
            <th>&nbsp;</th><th>Col 1</th><th>Col 2</th><th>Col 3</th>  
        </tr>
        <tr>
            <td>
                <div class="mobile-nav" style="border:0px solid red">
                    <div class="menu-btn" id="menu-btn">
                        <div>Menu1</div>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                 <div class="dropdown">
                    <ul class="list">
                       <li><button>Btn1</button></li>
                       <li><button>Btn2</button></li>
                       <li><button>Btn3</button></li>
                       <li><button>Btn4</button></li>
                    </ul>
                 </div>
                </div>
            </td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <td>
                <div class="mobile-nav" style="border:0px solid red">
                    <div class="menu-btn" id="menu-btn">
                        <div>Menu2</div>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                 <div class="dropdown">
                    <ul class="list">
                       <li><button>Btn1</button></li>
                       <li><button>Btn2</button></li>
                       <li><button>Btn3</button></li>
                       <li><button>Btn4</button></li>
                    </ul>
                 </div>
                </div>
            </td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <td>
                <div class="mobile-nav" style="border:0px solid red">
                    <div class="menu-btn" id="menu-btn">
                        <div>Menu3</div>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                 <div class="dropdown">
                    <ul class="list">
                       <li><button>Btn1</button></li>
                       <li><button>Btn2</button></li>
                       <li><button>Btn3</button></li>
                       <li><button>Btn4</button></li>
                    </ul>
                 </div>
                </div>
            </td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
      </table>
	  
    </body>
</html>

相关问题
最新问题