未使用div的類設定active屬性-有解無憂

我正在嘗試創建收件箱通知。它成功地打開和關閉，但只打開和關閉時，打開按鈕是div里面，但我試圖打開該通知時，Open button是outside的panel div，所以我創建了一個onClick事件remove和open 活動的類，但是當我點擊open Button then it is not opening or closing

// 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 沒有打開。

任何幫助將非常感激。謝謝你。

uj5u.com熱心網友回復：

要添加 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>

uj5u.com熱心網友回復：

如果要使用setAttribute添加類，則必須使用如下所示的函式。

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

這里修改了您的代碼：

// My onClick event

function openInbox() {
  gettingOpen = document.getElementsByTagName("myDiv");
  gettingOpen[0].setAttribute("class","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>

uj5u.com熱心網友回復：

希望下面的回答對你有所幫助。

我在您的 JS 代碼中做了以下更改：

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

變成

function opentInbox(){
  $(".myNotification").toggleClass("active");
};

更新的代碼片段

// My onClick event

function opentInbox(){
  $(".myNotification").toggleClass("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="opentInbox();">Open inbox Here(not working)</div>

<div class="myNavbar">
    <div class="navbar_right">
        <div 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>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

在您的場景中，使用Element.classListthan setAttribute。

Element.classList是只讀屬性，它回傳元素的類屬性的實時 DOMTokenList 集合。您可以使用修改其相關DOMTokenList add()，remove()，replace()，和toggle()方法。

您可以相應地更新您的openInbox()方法。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/351313.html

標籤：javascript html 查询 css

上一篇：ASP.NETCore：為List型別的模型屬性創建表單輸入

下一篇：從函式中獲取回傳的變數并放入document.write