Question

发现了一点，找不到它。

我在这里遇到一个问题。在http://cmctest.netserver11.net上，我有6个图像，它们具有切换jquery功能。问题是，当我切换两次时，另一个消失了。我尝试了jquery hide函数，但它无关紧要。

我唯一需要的是，当你切换第二个时，第一个将崩溃。

jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
    {
jQuery(this).next(".content").slideToggle(500);
    });
});

如果你可以提供帮助，那会很棒！感谢名单

Answer 1

你只需要在滑下之前隐藏所有内容

jQuery(document).ready(function() {
    jQuery(".content").hide(); // hide all

    //toggle the componenet with class msg_body
    jQuery(".heading img").click(function()
    {
        jQuery(".content").slideUp(500); // slide all up
        jQuery(this).next(".content").slideDown(500);
    });
});

没有必要使用slideToggle()来完成你想要的内容，不要“要求”用户再次点击隐藏文字......

顺便说一下......你应该使用<ul>而不是一堆<div>来标记，例如：

<ul id="content">
    <li class="item">
       <img src="/images/minified/closedcolored.png" alt="" />
       <div class="description">
          <h2>Acquisitie</h2>
          <p>Hoe scherp bent u als het gaat om het werven en houden van klanten?</p>
       </div>
    </li>
    ...
</ul>

然后你可以很容易地做到：

jQuery(document).ready(function() {
    jQuery(".description").hide(); // hide all

    //toggle the componenet with class msg_body
    jQuery(".item img").click(function()
    {
        jQuery(".description").slideUp(500); // slide all up
        jQuery(this).next().slideDown(500);
    });
});

我只是忘了一个小细节！

在click方法中，替换你拥有的内容：

jQuery(".description").slideUp(500); // slide all up
if(!jQuery(this).next().is(":visible")) // is visible already?
    jQuery(this).next().slideDown(500); // slide down

切换幻灯片和隐藏

1 个答案: