Question

我正在尝试这样做，以便当您点击某个元素时，会显示页面上的另一个div。我读了一些关于如何做到这一点的帖子，但我仍然遇到问题。

这是我要隐藏的div：

<div class="notification-list-wrapper" style="top: 124px; left: 355px; display: none; opacity: 1;">
    <ul class="notification-list-menu">
        <li class="notification-list-menu-item" id="unread-menu-item">Unread</li>
        <li class="notification-list-menu-item" id="all-menu-item">All</li>
        <li class="close-notification-list"></li>
    </ul>
    <ul class="notification-list" data-type="unread">

这是应该触发显示/隐藏的元素：

<a href="#">
    <li class="notificationicon">
        <span title="Notifications" class="notification-bubble" style="background-color: rgb(245, 108, 126); display: inline;top: 69px;left: 398px;">
            0
        </span>
    </li>
</a>

这是我的jQuery：

jQuery(document).ready(function() {
    jQuery('.notification-list-wrapper').hide();

    jQuery(".notification-bubble").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $this.next("div").fadeToggle(200);
        $('.notification-list-wrapper').not($this.next("div")).fadeOut(800);
    });
});

Answer 1

听起来，只要点击div，您就会尝试切换span的可见性。如果是，请尝试以下

$(document).ready(function() {
  $('a li.notificationicon span').click(function(e) {
    e.preventDefault();
    $('div.notification-list-wrapper').toggle();
  });
});

Answer 2

这是一个演示，http://jsfiddle.net/AdVgV/ @ Jared的答案也是正确的。

$(document).ready(function() {
    $(".notification-bubble").click(function() {
    $('div.notification-list-wrapper').toggle();
});
});

单击span时隐藏或显示div中的错误

2 个答案: