Question

修复了下面的帮助，请在此处查看此操作：http://bit.ly/15npgSC

我正在学习jQuery并遇到了一个我无法找到修复的问题。我有一个内容滑块，当单击一个按钮时，它会滑开，当再次单击该按钮时，它会关闭。这一切都很好，我的问题是当页面加载时滑块会自动打开，而不仅仅是在点击时。如何在页面加载时将其关闭并仅在单击时打开它？它之后工作正常，只是当页面加载时，它打开。我尝试将$(document).click(function() {放在开头那种工作方式，但是点击后它会打开，然后在打开后立即关闭，没有点击。我改回了下面的jQuery代码，但现在又遇到了在页面再次加载时打开它的问题。

$(document).ready(function() {
   $('.pull-me').click(function() {
       $('.panel').slideToggle('slow');
   });
   $('a').toggle(function() {
       $(this).html("Click to close!");},
       function() { $(this).html("Click to open!");
   }).click();
});

如果你能够解决这个问题，你能解释一下为什么我的当前代码会出现这种情况，为什么修复会阻止这种情况发生呢？谢谢，拉法。

很抱歉之前没有发布HTML代码，但就是这样：

<div class="panel">
<br />
<br />
   <p>Now you see me!</p>
</div>
<div>
    <p class="slide"><a href="#" class="pull-me">Click to open!</a></p>
</div>

Answer 1

试试这个：

// HTML

<div class="pull-me">
    Click here!
    </div>

<div class="panel">
    show/hide
</div>

// jQuery

$(document).ready(function() {
   $('.pull-me').click(function() {
       $('.panel').slideToggle('slow');
   });
       $('a').toggle(function() {
       $(this).html("Click to open!");},
       function() { $(this).html("Click to close!");
   });
});

在这个JsFiddle中检查 - ＆gt; http://jsfiddle.net/GXCuz/1/

Answer 2

因为你没有发布任何HTML所以我猜'.pull-me'是'a'元素。

请尝试下面的代码（删除.click（））：

$(document).ready(function() {
   $('.pull-me').click(function() {
       $('.panel').slideToggle('slow');
   });

   $('a').toggle(function() {
       $(this).html("Click to close!");},
       function() { $(this).html("Click to open!");
   }); // modified here
});

首次加载页面时，您正在触发点击事件。

jQuery - 滑动内容选项卡，单击幻灯片打开/关闭

2 个答案: