javascript - 活动属性未与 div 的类一起设置

Question

我正在尝试创建收件箱通知。它正在成功打开和关闭。但只有当打开按钮在 div 内时才会打开和关闭。但是我试图在Open button是outside时打开通知，panel div所以我为活动onClick类创建了一个事件。但是当我点击打开按钮时，它不会打开或关闭：removeopen

// My onClick event

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].setAttribute("myNotification", "active");
}


// Previous script to open and close which is working fine

$(".myNotification .icon_wrap").click(function(){
    $(this).parent().toggleClass("active");
});

$(".show_all .link").click(function(){
    $(".myNotification").removeClass("active");
    $(".popup").show();
});

$(".close, .shadow").click(function(){
    $(".popup").hide();
});

$(".myB").click(function(){
    $(".myNotification").removeClass("active");
});

.myNavbar .navbar_left .logo a{
   font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 505px;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .profile_dd,
.notification_dd{
  position: absolute;
  top: 18px;
  right: -10px;
  user-select: none;
  background: #fff;
  border: 1px solid #c7d8e2;
  width: 350px;
  padding: 3em;
  height: auto;
  display: none;
  border-radius: 3px;
  box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.125),
              -10px -10px 35px rgba(0, 0, 0, 0.125);
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />

<div onClick="openInbox();">Open inbox Here(not working)</div>

<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification Div
            </div>
        </myDiv>
    </div>
</div>

正如您所注意到的，我正在运行一个名为的函数openInbox来设置active属性myNotifiction。但是为什么div没有打开？

标签： javascripthtmljquerycss

Answer 1

要添加 CSS 类，请不要使用setAttribute，而是使用element.classList：

gettingOpen[0].classList.toggle("active");

// My onClick event

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].classList.toggle("active");

}


// Previous script to open and close which is working fine

$(".myNotification .icon_wrap").click(function(){
  $(this).parent().toggleClass("active");
});

$(".show_all .link").click(function(){
  $(".myNotification").removeClass("active");
  $(".popup").show();
});

$(".close, .shadow").click(function(){
  $(".popup").hide();
});

$(".myB").click(function(){
  $(".myNotification").removeClass("active");
});

.myNavbar .navbar_left .logo a{
   font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 505px;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .profile_dd,
.notification_dd{
  position: absolute;
  top: 18px;
  right: -10px;
  user-select: none;
  background: #fff;
  border: 1px solid #c7d8e2;
  width: 350px;
  padding: 3em;
  height: auto;
  display: none;
  border-radius: 3px;
  box-shadow: 10px 10px 35px rgba(0,0,0,0.125),
              -10px -10px 35px rgba(0,0,0,0.125);
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />

<div onClick="openInbox();">Open inbox Here(not working)</div>

<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification Div
            </div>
        </myDiv>
    </div>
</div>