Question

我正在尝试创建一个Tumblr主题，当您点击+号时，链接和帖子信息会滑入其中。（我的测试博客位于http://noitsnotitsnotokay.tumblr.com/）

我非常喜欢JavaScript，但我能够使用以下代码编写链接菜单：

<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>

<script>
$("ul.lks").hide();
$("span.btn").click(function () {
  $("ul.lks").slideToggle("slow");
});
</script>

但我也有一段适用于所有帖子的代码，用于发布信息。我使用了几乎相同的代码，但是，正如您可能看到的那样，它会不时地滑入和滑出。

<div class="pstinfo">
    <!-- info is here -->
</div>
<span class="plsign">+</span>

<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
  $("div.pstinfo").slideToggle("slow");
});
</script>

似乎按钮的顺序和我在JavaScript中命名类的方式没有太大变化......任何提示？

Answer 1

如果您不希望在单击“.plsign”时打开所有“.pstinfo”元素，只需打开相关的元素，请尝试以下代码：

HTML：

 <div class='parentContainer'> <!--put your elements in a parent Container -->
        <div class='info'>
            Info 1
        </div>   
        <div class='plsign'>
            + Open
        </div> 
    </div> 
    <div class='parentContainer'>
        <div class='info'>
            Info 2
        </div>   
        <div class='plsign'>
            + Open
        </div> 
    </div> 
    <div class='parentContainer'>
        <div class='info'>
            Info 3
        </div>   
        <div class='plsign'>
            + Open
        </div> 
    </div>

JS：

$(".plsign").on('click',function () 
 {   
    $(this).parent().find('.info').slideToggle("slow");
 });

链接到jsFiddle

Answer 2

代码块01

<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>

<script>
$("ul.lks").hide();
$("span.btn").click(function () {
  $("ul.lks").stop().slideToggle("slow");
});
</script>

代码块02

<div class="pstinfo">
    <!-- info is here -->
</div>
<span class="plsign">+</span>

<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
  $("div.pstinfo").stop().slideToggle("slow");
});
</script>

尝试此代码并更新结果：）

.slideToggle（）被多次触发？

2 个答案: