鏈接無法在div之外工作？

我正在創建通知部分，其中鏈接在通知下拉菜單中提供，但通知鏈接不起作用，它顯示了我在瀏覽器左下方提供的鏈接，但它無法點擊？鏈接無法在div之外工作？

HTML

<a href="" id="notificationLink" title="Notifications"><i class="fa fa-globe"><span class="badge badge-notify">.</span></i></a> 

    <div id="notificationContainer"> 
<div id="notificationTitle">Notifications</div> 
<div id="notificationsBody" class="notifications"> 

<div class="col-sm-12 col-md-12 col-lg-12"> 
<a href="notifications.php#1" id="details-container-notification"> 
<ul class="area-notification"> 
<li> 
<div class="profile-image-notification"> 
<div id="profile-container-notification"> 
<image id="profileImageNotification" src="../images/img_avatar.png" /> 
</div> 
</div> 
</li> 
<li class="description-notification"><p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p></li> 
</ul> 
</a> 
</div> 

</div> 
</div>

CSS

#notificationContainer { 
background-color: #fff; 
border: 1px solid rgba(100, 100, 100, .4); 
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); 
overflow: hidden; 
position: absolute; 
top: 40px; 
margin-left: -250px; 
width: 400px; 
display: none; 
z-index: 1; 
} 

#notificationTitle { 
z-index: 1000; 
padding: 8px; 
font-size: 18px; 
background-color: #ffffff; 
width: 384px; 
border-bottom: 1px solid #dddddd; 
font-family:Bookman Old Style ; 
} 

#notificationsBody { 
padding: 0px 0px 0px 0px !important; 
min-height:100px; 
font-family:Bookman Old Style ; 
margin-bottom:0px; 
} 

#details-container-notification{ 
    margin-top:0%; 
    text-decoration:none; 
    float:left; 
    width:100%; 
    margin-left:0%; 
    font-size: 14px; 
    word-spacing: 1px; 
    line-height: 150%; 
    color: darkblack; 
    text-decoration:none; 
    font-family:Bookman Old Style ; 
    border-bottom:1px solid #f5f8fa; 
    padding:10px; 
} 

#details-container-notification:hover{ 
    background-color:#fafafa; 
} 


.area-notification{ 
    width:100%; 
} 

#profile-container-notification { 
    float:left; 
    margin-left:0%; 
    margin-right:2%; 
    width: 60px; 
    height: 60px; 
    overflow: hidden; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -ms-border-radius: 50%; 
    -o-border-radius: 50%; 
    border-radius: 50%; 
    margin-bottom:15px; 
} 

#profile-container-notification img { 
    width: 60px; 
    height: 60px; 
} 

#notificationFooter{ 
background-color: #e9eaed; 
text-align: center; 
padding: 8px; 
width:100%; 
font-size: 18px; 
border-top: 1px solid #dddddd; 
text-decoration:none; 
font-family:Bookman Old Style ; 
} 

.badge-notify{ 
    background:#3897f0; 
    position:relative; 
    top: -10px; 
    left: -35px; 
    }

的jsfiddle： - https://jsfiddle.net/r33osLt9/1/

來源

2017-01-23 Nakhhhh

請問您可以添加一個工作小提琴 –

是的，稍等片刻 – Nakhhhh

我可以添加整個頁面，它會是大使館？ – Nakhhhh

我不知道到底是什麼你的問題，如果我的想法是正確的，從你的js刪除 return false，有工作撥弄

$("#notificationContainer").click(function() { 
    //return false 
});

https://jsfiddle.net/r33osLt9/2/

檢查只是這也

嘗試

$(function(){ 
 
\t 
 
\t $("#notificationLink").on('click', function(e){ 
 
\t \t e.preventDefault(); /* this will block the link */ 
 
\t \t e.stopPropagation(); 
 
\t \t $("#notificationContainer").slideToggle(300); 
 
\t }); 
 
\t 
 
\t $("#settingLink").on('click', function(e){ 
 
\t \t e.preventDefault(); /* this will block the link */ 
 
\t \t e.stopPropagation(); 
 
\t \t $("#settingContainer").fadeToggle(300); 
 
\t }); 
 
\t 
 
\t $(document).on('click', function(){ 
 
\t \t $("#notificationContainer").hide(); 
 
\t \t $("#settingContainer").hide(); 
 
\t }); 
 
\t 
 
});

.navigation { 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t background-color: #fafafa; 
 
\t margin-bottom: 1%; 
 
} 
 
#notificationContainer { 
 
\t background-color: #fff; 
 
\t border: 1px solid rgba(100, 100, 100, .4); 
 
\t -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); 
 
\t overflow: hidden; 
 
\t position: absolute; 
 
\t top: 40px; 
 
\t margin-left: 0px; 
 
\t width: 400px; 
 
\t display: none; 
 
\t z-index: 1; 
 
} 
 
#notificationTitle { 
 
\t z-index: 1000; 
 
\t padding: 8px; 
 
\t font-size: 18px; 
 
\t background-color: #ffffff; 
 
\t width: 384px; 
 
\t border-bottom: 1px solid #dddddd; 
 
\t font-family: Bookman Old Style; 
 
} 
 
#notificationsBody { 
 
\t padding: 0px 0px 0px 0px !important; 
 
\t min-height: 100px; 
 
\t font-family: Bookman Old Style; 
 
\t margin-bottom: 0px; 
 
} 
 
#details-container-notification { 
 
\t margin-top: 0%; 
 
\t text-decoration: none; 
 
\t float: left; 
 
\t width: 100%; 
 
\t margin-left: 0%; 
 
\t font-size: 14px; 
 
\t word-spacing: 1px; 
 
\t line-height: 150%; 
 
\t color: darkblack; 
 
\t text-decoration: none; 
 
\t font-family: Bookman Old Style; 
 
\t border-bottom: 1px solid #f5f8fa; 
 
\t padding: 10px; 
 
} 
 
#details-container-notification:hover { 
 
\t background-color: #fafafa; 
 
} 
 
.area-notification { 
 
\t width: 100%; 
 
} 
 
#profile-container-notification { 
 
\t float: left; 
 
\t margin-left: 0%; 
 
\t margin-right: 2%; 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t overflow: hidden; 
 
\t -webkit-border-radius: 50%; 
 
\t -moz-border-radius: 50%; 
 
\t -ms-border-radius: 50%; 
 
\t -o-border-radius: 50%; 
 
\t border-radius: 50%; 
 
\t margin-bottom: 15px; 
 
} 
 
#profile-container-notification img { 
 
\t width: 60px; 
 
\t height: 60px; 
 
} 
 
#notificationFooter { 
 
\t background-color: #e9eaed; 
 
\t text-align: center; 
 
\t padding: 8px; 
 
\t width: 100%; 
 
\t font-size: 18px; 
 
\t border-top: 1px solid #dddddd; 
 
\t text-decoration: none; 
 
\t font-family: Bookman Old Style; 
 
} 
 
.badge-notify { 
 
\t background: #3897f0; 
 
\t position: relative; 
 
\t top: -10px; 
 
\t left: -35px; 
 
} 
 
#settingContainer { 
 
\t background-color: #fff; 
 
\t border: 1px solid rgba(100, 100, 100, .4); 
 
\t -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); 
 
\t overflow: hidden; 
 
\t position: absolute; 
 
\t top: 40px; 
 
\t margin-left: 0px; 
 
\t width: 180px; 
 
\t display: none; 
 
\t z-index: 1; 
 
} 
 
#settingsBody { 
 
\t padding: 10px 0px 0px 0px !important; 
 
\t height: 50px; 
 
\t font-family: Bookman Old Style; 
 
} 
 
.area-setting { 
 
\t width: 100%; 
 
} 
 
#details-container-setting { 
 
\t text-decoration: none; 
 
\t float: left; 
 
\t width: 100%; 
 
\t margin-left: 1%; 
 
\t font-size: 18px; 
 
\t word-spacing: 1px; 
 
\t color: darkblack; 
 
\t text-decoration: none; 
 
\t font-family: Bookman Old Style; 
 
\t line-height: 50%; 
 
\t margin-bottom: 10px; 
 
\t margin-top: 0%; 
 
\t padding: 10px; 
 
} 
 
#details-container-setting:hover { 
 
\t background-color: #fafafa; 
 
} 
 
.icon-bar a { 
 
\t width: 50px; 
 
\t float: left; 
 
\t font-size: 30px; 
 
\t color: black; 
 
} 
 
.icon1 { 
 
\t display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="navigation"> 
 
    <div class="icon-bar"> <a href="../search/search.php" class="icon1" title="Search"><i class="fa fa-search"><span></span></i></a> <a href="../messages/messages.php" title="Messages"><i class="fa fa-envelope"><span class="badge badge-notify">.</span></i></a> <a href="" id="notificationLink" title="Notifications"><i class="fa fa-globe"><span class="badge badge-notify">.</span></i></a> 
 
    <div id="notificationContainer"> 
 
     <div id="notificationTitle">Notifications</div> 
 
     <div id="notificationsBody" class="notifications"> 
 
     <div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#1" id="details-container-notification"> 
 
      <ul class="area-notification"> 
 
      <li> 
 
       <div class="profile-image-notification"> 
 
       <div id="profile-container-notification"> 
 
        <image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" /> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li class="description-notification"> 
 
       <p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p> 
 
      </li> 
 
      </ul> 
 
      </a> </div> 
 
     <div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#2" id="details-container-notification"> 
 
      <ul class="area-notification"> 
 
      <li> 
 
       <div class="profile-image-notification"> 
 
       <div id="profile-container-notification"> 
 
        <image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" /> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <p class="description-notification">KEntury Fried Chicken</p> 
 
      </li> 
 
      </ul> 
 
      </a> </div> 
 
     <div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#3" id="details-container-notification"> 
 
      <ul class="area-notification"> 
 
      <li> 
 
       <div class="profile-image-notification"> 
 
       <div id="profile-container-notification"> 
 
        <image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" /> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <p class="description-notification">KFC</p> 
 
      </li> 
 
      </ul> 
 
      </a> </div> 
 
     </div> 
 
     <a href="notifications.php" id="notificationFooter"> 
 
     <p>See All</p> 
 
     </a> </div> 
 
    <a href="../settings/settings.php" id="settingLink" title="Settings"><i class="fa fa-cog"></i></a> 
 
    <div id="settingContainer"> 
 
     <div id="settingsBody" class="setting"> 
 
     <div class="col-sm-12 col-md-12 col-lg-12"> <a href="../edit-profile/edit-profile.php" id="details-container-setting"> 
 
      <ul class="area-setting"> 
 
      <li> 
 
       <p class="description-setting">Setting</p> 
 
      </li> 
 
      </ul> 
 
      </a> </div> 
 
     <div class="col-sm-12 col-md-12 col-lg-12"> <a href="../logout/logout.php" id="details-container-setting"> 
 
      <ul class="area-setting"> 
 
      <li> 
 
       <p class="description-setting">Logout</p> 
 
      </li> 
 
      </ul> 
 
      </a> </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2017-01-23 10:40:41

的問題是，如果你點擊通知或設置例如註銷，鏈接沒有去那個頁面，爲什麼？ – Nakhhhh

非常感謝你的工作 – Nakhhhh

我可以問另一個問題嗎？ – Nakhhhh

-1

你的標籤需要有display:block。

如果不是，則標籤a不能包含塊元素。由於html規則，unblock-level元素不能包含塊級元素。如果你這樣做，unblock-level將無法正常工作。

來源

2017-01-23 09:55:47

顯示：塊不起作用 – Nakhhhh

鏈接無法在div之外工作？

回答

相關問題