链接在通知下拉菜单中没有在div之外工作？

时间：2017-01-23 09:41:08

标签： javascript jquery html css

我正在创建通知部分，其中链接在下拉菜单中的通知中提供，但通知上的链接不起作用，它显示我在浏览器左下角提供的链接但它不能可点击的？

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/

2 个答案:

答案 0 :(得分：1)

如果我的想法正确删除，我不知道你的问题究竟是什么 来自你的return false js，用工作小提琴检查

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

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

也试试这个

$(function(){
	
	$("#notificationLink").on('click', function(e){
		e.preventDefault(); /* this will block the link */
		e.stopPropagation();
		$("#notificationContainer").slideToggle(300);
	});
	
	$("#settingLink").on('click', function(e){
		e.preventDefault(); /* this will block the link */
		e.stopPropagation();
		$("#settingContainer").fadeToggle(300);
	});
	
	$(document).on('click', function(){
		$("#notificationContainer").hide();
		$("#settingContainer").hide();
	});
	
});
.navigation {
	width: 100%;
	height: 70px;
	background-color: #fafafa;
	margin-bottom: 1%;
}
#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: 0px;
	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;
}
#settingContainer {
	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: 0px;
	width: 180px;
	display: none;
	z-index: 1;
}
#settingsBody {
	padding: 10px 0px 0px 0px !important;
	height: 50px;
	font-family: Bookman Old Style;
}
.area-setting {
	width: 100%;
}
#details-container-setting {
	text-decoration: none;
	float: left;
	width: 100%;
	margin-left: 1%;
	font-size: 18px;
	word-spacing: 1px;
	color: darkblack;
	text-decoration: none;
	font-family: Bookman Old Style;
	line-height: 50%;
	margin-bottom: 10px;
	margin-top: 0%;
	padding: 10px;
}
#details-container-setting:hover {
	background-color: #fafafa;
}
.icon-bar a {
	width: 50px;
	float: left;
	font-size: 30px;
	color: black;
}
.icon1 {
	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>

答案 1 :(得分：-1)

您的代码需要display:block。

如果不是，则标签a不能包含块元素。由于html规则，unblock-level元素不能包含块级元素。如果你这样做，那么unblock-level将无法正常工作。

相关问题
最新问题