Question

http://jsfiddle.net/FsCHJ/2/

现在发生的是，每当我有另一个链接示例时，它也会使用此链接作为切换按钮。我只想要切换编辑模式来打开/关闭隐藏的div。因此，我尝试将$("a").click(function ()更改为$("toggle").click(function ()和<a>Toggle Edit Mode</a>更改为切换编辑模式`，但不起作用。有任何想法吗？

HTML

<li><a>Toggle Edit Mode</a>

</li>
<div class="hidden rightButton">hello</div>

CSS

.hidden {
    display: none;
}
.unhidden {
    display: block;
}

JS

$(document).ready(function () {
    $("a").click(function () {
        $("div").toggleClass("hidden unhidden");
    });
});

Answer 1

你想要这个。

<li><a class="toggle">Toggle Edit Mode</a>

$(".toggle").click(function () {
    $("div").toggleClass("hidden unhidden");
}

您无法使用$("toggle")，因为这会查找html标记<toggle>。而是将类toggle添加到要切换的链接。

Answer 2

使用“ID”选择器。

http://jsfiddle.net/FsCHJ/1/

在一个页面中可以有许多类（class = ...），但每页的id（id = ...）是juste。更多信息here。

使用Javascript：

$(document).ready(function () {
    $("#toggle").click(function () {
        $("div").toggleClass("hidden unhidden");
    });
});

HTML：

<li><a id="toggle">Toggle Edit Mode</a></li>

<div class="hidden rightButton">hello</div>

$(document).ready(function () {
    $("#toggle").click(function () {
        $("div").toggleClass("hidden unhidden");
    });
});

.hidden {
    display: none;
}
.unhidden {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<li><a id="toggle">Toggle Edit Mode</a></li>

<div class="hidden rightButton">hello</div>

Answer 3

使用.className选择器：

$(".toggle").click(function () {});

您还可以使用jQuery的toggle函数。

$(".toggle").click(function () {
    $("div").toggle();
});

创建小提琴演示toggle。

Answer 4

这对我有用。允许我使用相同的链接显示或隐藏文本。我将链接与我要显示的div相关联。这适用于具有多个记录的列表，每个记录都有自己的ID。

<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>

<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>

<script>
    $(document).ready(function () {
        $(".showHideToggle").click(function (ctl) {
            var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
            var divToToggle = $("#" + linkedDivName);
            //alert('current status: ' + divToToggle.css('display'));

             if (divToToggle.css('display') == 'none') {
                divToToggle.css("display", "block");
                $(this).text("Hide Details");
            } else {
                divToToggle.css("display", "none");
                $(this).text("Show Details");
            }
        });
    });
</script>

在链接点击上切换div

4 个答案: