Question

我使用一个从数据库中读取成员数据的脚本并将其放在一个表中，每个成员都有一行每行都有一个具有相同类和ID的下拉列表我使用以下代码打开和关闭下拉列表但问题是我只能打开第一个

PHP

`
    <div class="filter-select cf ">
    <div class="fake-dropdown dropdown-check" id="fake3" style="visibility: visible;">
    <a href="#" class="dropdown-toggle" id="drop3" data-toggle="dropdown" data-autowidth="true">
    <span class="icn-edit-wheel"></span>
    <span class="drop-initial"></span>
    </a>
    <ul class="dropdown-menu pull-right" role="menu" style="top: 25px;">
    <li><a href="{$baseurl}/edit?id={$posts[i].PID}">Edit</a></li>
    <li><a target="_blank" href=" {$baseurl}/{$posts[i].seo|stripslashes}/{$posts[i].PID|stripslashes}/{$title}">Preview</a></li>

`

脚本

$('#drop3').click(function(e) { $('#fake3').toggleClass("open"); e.preventDefault(); });

这是页面上显示的dropmenu

http://i.stack.imgur.com/KmEV5.jpg

Answer 1

您可以尝试此操作，添加课程类型，因为您无法重复使用相同的id名称

<强> PHP

<div class="filter-select cf ">
<div class="fake-dropdown dropdown-check fake" id="fake3" style="visibility: visible;">
<a href="#" class="dropdown-toggle drop" id="drop3" data-toggle="dropdown" data-autowidth="true">
<span class="icn-edit-wheel"></span>
<span class="drop-initial"></span>
</a>
<ul class="dropdown-menu pull-right" role="menu" style="top: 25px;">
<li><a href="{$baseurl}/edit?id={$posts[i].PID}">Edit</a></li>
<li><a target="_blank" href=" {$baseurl}/{$posts[i].seo|stripslashes}/{$posts[i].PID|stripslashes}/{$title}">Preview</a></li>

<强>脚本

$('.drop').click(function(e) {
  $('.fake').toggleClass("open");
  e.preventDefault();
});

- 编辑 -

您可以使用closest选择最接近的类，或使用父级选择元素级别。

$('.drop').click(function(e) {
  $(this).closest('.fake').toggleClass("open");
  e.preventDefault();
});

Answer 2

您不应多次使用相同的id。您也不能使用类，因为它将同时打开所有下拉列表。一个选项是使用JQuery监听器并使用this作为起点。试试这个：

$(document).on('click', '.dropdown-toggle',function(e){
    e.preventDefault();

    //For toggle class on 'fake-dropdown'
    $(this).parent().toggleClass("open");
});

重复下拉菜单仅打开第一个菜单

PHP

脚本

2 个答案: