javascript - jQuery 切换下一个 P

Question

我试图创建一个功能，当单击按钮时切换段落显示 CSS 我似乎根本无法让它工作，我的浏览器只是回到页面顶部？我的 jQuery 是...

$('.useful-links ul li a').click(function(){
    $('.useful-links ul li a').parent('li').find('p').toggle();     
});

我的标记是

<li>
     <a href="#">RESIDENTIAL AGENTS</a>
     <p style="display:none;">sfsdfsdfsd</p>
</li>

Answer 1

我假设你的 HTML 结构是这样的：

<div class="useful-links">
    <ul>
        <li>
            <a href="#">RESIDENTIAL AGENTS</a>
            <p style="display:none;">sfsdfsdfsd</p>
        </li>
    </ul>
</div>​

// For your jQuery selector to work as you have it

$('.useful-links ul li a').on('click', function (e) {
    e.preventDefault(); // stop href()
    $(this).next('p').toggle();     
});

演示：http: //jsfiddle.net/p4SJB/

Answer 2

首先，您正在使用锚元素，因此您需要防止默认操作。然后你可以做你的逻辑：

$('.useful-links ul li a').click(function(e){
    e.preventDefault();
    $(this).closest('li').find('p').toggle();     
});

这是一个工作示例

---

另外，如果您知道您的a和p元素将始终具有相同的父母，您可以使用该siblings方法（效果并不好，只是一种替代方法）：

$(this).siblings('p').toggle(); 

和另一个例子

Answer 3

使用$(this)：

$('.useful-links ul li a').click(function(e){
    e.preventDefault();
    $(this).parent('li').find('p').toggle();     
});

我更喜欢找到共同的父元素，然后“找到”目标元素。这意味着如果您的 HTML 标记发生变化，那么p您a的 jQuery 将不会受到影响。

见演示：http: //jsfiddle.net/S2hSp/