Question

HTML标记：触发器

<li class="divider"></li>

<li class="has-dropdown active" id="calloutButton"><a><img style="height: 25px; width: 25px;" src="img/at.png"><span class="label">2</span></a></li>

<li class="divider"></li>

<li class="has-dropdown" id="hashtagButton"><a><img style="height: 25px; width: 25px;" src="img/hashtag.png"><span class="label">3</span></a></li>

<li class="divider"></li>

<li class="has-dropdown" id="messagesButton"><a><img style="height: 25px; width: 25px;" src="img/mail.png"><span class="label">5</span></a></li>

<li class="divider"></li>

容器divs：

 <div id="messages-pop-up">Foo bar</div>
 <div id="hashtag-pop-up">New bar</div>
 <div id="callout-pop-up">Lube bar</div>

和Jquery：

 $('li#messagesButton').click(function(h) {
                $('div#messages-pop-up').stop().slideDown();
            });
 $('li#hashtagButton').click(function(j) {
                $('div#hashtag-pop-up').stop().slideDown();
            });
 $('li#calloutButton').click(function(k) {
                $('div#callout-pop-up').stop().slideDown();
            });

你可以看到问题，它们都可以同时打开并且是重叠的。因为当我点击li时我正在使用Foundation它会归类active，我想要其他在打开时关闭。我不想改变html标记，但如果没有别的办法，我会遵守。

Answer 1

你可以用两种方式做到这一点

1 - 在滑动之前的每个点击事件中，通过向三个类添加一个类并在类中隐藏所有div。

将pop-out-div类添加到所有div。

$('li#messagesButton').click(function(h) {
    $(".pop-out-div").hide();
    $('div#messages-pop-up').stop().slideDown();
});
$('li#hashtagButton').click(function(j) {
    $(".pop-out-div").hide();
    $('div#hashtag-pop-up').stop().slideDown();
});
$('li#calloutButton').click(function(k) {
    $(".pop-out-div").hide();
    $('div#callout-pop-up').stop().slideDown();
});

2 - 隐藏除了需要打开的div之外的所有其他div。

$('li#messagesButton').click(function(h) {
    $('div#hashtag-pop-up').hide();
    $('div#callout-pop-up').hide();
    $('div#messages-pop-up').stop().slideDown();
});
$('li#hashtagButton').click(function(j) {
    $('div#messages-pop-up').hide();
    $('div#callout-pop-up').hide();
    $('div#hashtag-pop-up').stop().slideDown();
});
$('li#calloutButton').click(function(k) {
    $('div#hashtag-pop-up').hide();
    $('div#messages-pop-up').hide();
    $('div#callout-pop-up').stop().slideDown();
});

Answer 2

猜猜你要找的是 accordion ，如果有人打开，这将关闭其他人。你需要重新设计你的来源，但实际上这样做可以解决你的问题。

Answer 3

试试这个，将data- *添加到html并与jQuery一起使用

1，将HTML更改为

<li class="divider"></li>

<li class="has-dropdown active" id="calloutButton" data-content-wrapper="messages-pop-up"><a><img style="height: 25px; width: 25px;" src="img/at.png"><span class="label">2</span></a></li>

<li class="divider"></li>

<li class="has-dropdown" id="hashtagButton" data-content-wrapper="hashtag-pop-up"><a><img style="height: 25px; width: 25px;" src="img/hashtag.png"><span class="label">3</span></a></li>

<li class="divider"></li>

<li class="has-dropdown" id="messagesButton" data-content-wrapper="callout-pop-up"><a><img style="height: 25px; width: 25px;" src="img/mail.png"><span class="label">5</span></a></li>

<li class="divider"></li>

然后编写脚本

$("li").click(function () {
                var CurrentActive = $(this).parent().children(".active");
                if (CurrentActive != undefined && CurrentActive != null) {
                    CurrentActive.removeClass("active");
                    $('#' + CurrentActive.data('content-wrapper')).hide();
                }
                $(this).addClass("active");

                $('#' + $(this).data('content-wrapper')).stop().slideDown();


            });

我认为这可能适合你

显示/隐藏基于相应锚点的hasClass（'active'）的div

3 个答案: