Question

我想通过id隐藏/显示很多内容

以下是一个例子：

<a href="#" class="click"> title here </a>
<p class="content" id="1">
    text here ...
</p>

<a href="#" class="click" id="2"> another title here </a>
<p class="content">
    another text here ...
</p>

我可以在HTML代码中添加ID。我如何通过jQuery获取它？

jQuery行：

<script type="text/javascript">
     $(document).ready(function(){
        $('.content').hide();
        $('.click').click(function() {
           $('.content').slideToggle(500);
            return false;
        });

Answer 1

您希望显示/隐藏与点击链接相关的内容？您不是在寻找ID，而是在寻找更好的Javascript：）

尝试这样的事情：

$('.click').click(function()
{
    $(this).next().slideToggle(500);
}

Answer 2

很容易，而不是定位一个类，目标是一个id：

$('#content').hide();

..并相应地更改您的HTML：

<p id="content">

Answer 3

如果p.content总是紧跟在.click链接之后，你可以这样做：

$('.click').click(function(ev){ 
   $(this).next().toggle(); 
   ev.preventDefault(); 
});

Answer 4

你应该迭代每个选择，我想：

<html>
    <head>
        <title>MooExample</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#click").click(function() {
                    $("li").each(function() {
                        $(this).toggle();
                    });
                });
            });
        </script>
    </head>

    <body>
        <ul>
            <li>moo</li>
            <li>foo</li>
            <li>fasoo</li>
            <li>moasf</li>
            <li>moosadg</li>
            <li>moo1</li>
            <li>moo412</li>
            <li>moo613a</li>
        </ul>
        <input type="button" id="click" onclick="moo()" value="click" />
    </body>
</html>

UPD ：如果你想隐藏一些元素范围，你可以改变选择器（仅选择所需的范围项）或使用每个（索引）形式：

$("#click").click(function() {
    $("li").each(function(index) {
        if (index > 2 && index < 6)
            $(this).slideToggle(500);
        });
});

Answer 5

修改了你的代码

的 HTML 的

<a href="#" class="click"> title here </a> text here ... <a href="#" class="click" id="content2"> another title here </a> another text here ... 

的 CSS 的

p.content { display: none; }

的的jQuery 的

$(function(){ var openedElem = null; $("a.click").click(function(){ var nextElem = $(this).next(); if (openedElem !== null) { if (openedElem.attr("id") === nextElem.attr("id")) { return false; } openedElem.slideUp(); } openedElem = nextElem.slideDown(); return false; // to prevent the default action }); });

查看working demo

逐行崩溃（jQuery）

5 个答案: