1
基本上,當我點擊第一個.menu-btn時,它應該只被調用第一個.dropdown 請注意,此內容是即時生成的,所以我不能用不同的ID對所有jquery事件是爲所有具有相同類名而不是當前選定按鈕的按鈕啓動的
$(document).ready(function() {
$(".menu-btn").click(function() {
$(".dropdown").toggleClass('expand');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped">
<tr>
<th> </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>
'$(本)。接下來(」下拉菜單 「)toggleClass( '擴大');'$ –
(本).find(」。下拉列表「)。toggleCalss .... – Aftab