Question

我是Jquery的新手，我需要在网站上显示和隐藏很多产品。实际上我正在使用这个脚本：

的JavaScript

$(document).ready(function() {

    $(".toggle-trigger").mouseenter(function() {
        $(this).parent().nextAll('.toggle-wrap').first().toggle('slow');
    });
});

HTML

<p><a class="toggle-trigger">TITLE</a><p>
<div class="toggle-wrap">
    <div class="style-single">
        TEXT
    </div>
</div>

<p><a class="toggle-trigger"> TITLE </a><p>
<div class="toggle-wrap">
    <div class="style-single">
        TEXT
    </div>
</div>

但是，当我点击页面时，所有元素都会在点击时显示并隐藏。我需要与此相反，当页面加载时，所有元素都隐藏，点击该项目时显示...我该怎么办？

Answer 1

你的选择器是不必要的复杂。试试这个：

$(this).parent().next('.toggle-wrap').toggle('slow');

<强> Demo

注意：我更正了结束段落标记。完成后，这是主要问题和原始代码 works fine 。

Answer 2

如果您想切换点击（也可以像提到的isherwood一样，修复您的开放式<p>标签），您可以执行此类操作。

$(document).ready(function() {
    $(".toggle-trigger").click(function() {
        $(this).parent().next('.toggle-wrap').stop().toggle('slow');
    });
});

这个想法是，你想在点击时切换显示/隐藏动画。我还添加了stop以消除任何活动转换

您还希望通过应用一些CSS

来隐藏初始加载时的下拉文本

<style>
    .toggle-wrap{
        display:none    
    }
</style>

实施例

http://jsfiddle.net/046wvcja/

Jquery切换触发器 - 隐藏并显示文本

2 个答案: