Question

我在JQuery中写了一个小函数，花了我一会儿，但我到了那里。您单击链接并显示下拉列表。但是我需要点击链接并显示下拉列表，但再次点击它我想再次使用相同的下拉菜单，最多可达4个。

现在我对此感到困惑，这就是我有多远。

HTML：

<a class="toggle" href="#">Add another Location</a>

插入更多地点dropdownbox

JQuery的：

$(function() {
    $("a.toggle").click(function(e) {
        $(this).next().toggle();
        e.preventDefault();
    });
});

CSS：

.toggleDiv { display: none; }
.toggle { font: 14px black Tahoma; }

任何人都可以指出正确的方向。我的JSFiddle在这里：

http://jsfiddle.net/Painstar/bkVNk/

谢谢！

Answer 1

我已经更新了您发送的小提琴以及我是如何做到的：

<强>的jQuery

var current = 1;
$(function() {
$("a.toggle").click(function(e) {
    if(current <= 4) {
      $("#moreLocations" + current).show();
    current += 1;
    }
e.preventDefault();
 });
});

<强> HTML

<a class="toggle" href="#">Add another Location</a>
<div id="moreLocations1" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations2" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations3" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations4" class="toggleDiv">insert more locations dropdownbox</div>

假设您希望将4个盒子作为单独的项目。

您也可以将.sibling()与ID一起使用，但如果您知道ID，则应该没问题。

JQuery - 单击链接时显示多个选择框

1 个答案: