用javascript处理：before和：after

时间：2018-12-30 16:15:45

标签： javascript css class

我有一个下拉导航栏（下面是小提琴here和摘录）。单击SubItem时，JS函数进行Ajax调用（未显示）。我想要实现的是单击SubItem时隐藏SubItems列表，以避免当前令人讨厌的重叠。

function GetData(TheClicked,WhichItem) {
	//In the working version, here is an Ajax call;
	document.getElementById("MainContainer").innerHTML = 'SomeTextSomeTextSomeTextSomeText';
}
body {
	margin: 0;
	padding: 0;
	background: #fcf8f2;
}
.NavBarContainer {
	position: block;
  clear: both;
	top: 0;
	width: 100%;
	background: #4a535b;
}
.NavBar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.NavBar ul li {
	display: block;
	position: relative;
	float: left;
}
.NavBar li ul { display: none; }

.NavBar ul li a {
	display: block;
	padding: 0.6rem;
	text-decoration: none;
	white-space: nowrap;
	color: #fffbf4;
	font-size:1.2rem;
	letter-spacing:0.1rem;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

.NavBar ul li a:hover { 
	background: #2c3e50; 
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
	transition: background-color 0.5s ease-out;
}
.NavBar li:hover > ul {
	display: block;
	position: absolute;
}

.NavBar li:hover li { float: none; }

.NavBar li:hover a { background: #4a535b; }

.NavBar li:hover li a:hover { background: #2c3e50; }

.NavBar li ul li { border-top: 0; }
.NavBar ul ul ul {
	left: 100%;
  top: 0;
}

.NavBar ul:before,
.NavBar ul:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}
.NavBar ul:after { clear: both; }

.MainContainer {
	background: #fffcf9;
	margin: auto;
	width: 80%;
	border-style:solid;
	border-width:thin;
	border-color:#e2e0d9;
	padding:1rem;
  color: red;
}
<div class="NavBarContainer" id="NavBarContainer">
<div class="NavBar">
  <ul>
    <li><a href="#">Item#1</a>
      <ul>
        <li><a href="#" onclick="GetData(this,'SubItem_11');">SubItem_11</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_12'); return false;">SubItem_12</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_13'); return false;">SubItem_13</a></li>
      </ul>
    </li>
		<li><a href="#">Item#2</a>
      <ul>
        <li><a href="#" onclick="GetData(this,'SubItem_21'); return false;">SubItem_21</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_22'); return false;">SubItem_22</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_23'); return false;">SubItem_23</a></li>
      </ul>   
		</li> 
		<li><a href="#">Item#3</a>
      <ul>
        <li><a href="#" onclick="GetData(this,'SubItem_31');">SubItem_31</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_32');">SubItem_32</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_33');">SubItem_33</a></li>
      </ul>   
		</li>     
  </ul>     
</div>
</div>


<div class="MainContainer" id="MainContainer">...</div>

2 个答案:

答案 0 :(得分：1)

您可以做的是在隐藏子菜单后立即取消激活指针事件并重新激活它，例如：

function GetData(TheClicked,WhichItem) {
    //In the working version, here is an Ajax call;
    document.getElementById("MainContainer").innerHTML = 'SomeTextSomeTextSomeTextSomeText';
    // The parent ul
    var parent = TheClicked.parentElement.parentElement;
    // De-activate the pointer-events
    parent.style['pointer-events'] = 'none';
    // Re-activate the pointer-events after 100ms
    setTimeout(function() {
        parent.style['pointer-events'] = '';
    }, 100);
}
body {
	margin: 0;
	padding: 0;
	background: #fcf8f2;
}
.NavBarContainer {
	position: block;
  clear: both;
	top: 0;
	width: 100%;
	background: #4a535b;
}
.NavBar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.NavBar ul li {
	display: block;
	position: relative;
	float: left;
}
.NavBar li ul { display: none; }

.NavBar ul li a {
	display: block;
	padding: 0.6rem;
	text-decoration: none;
	white-space: nowrap;
	color: #fffbf4;
	font-size:1.2rem;
	letter-spacing:0.1rem;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

.NavBar ul li a:hover { 
	background: #2c3e50; 
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
	transition: background-color 0.5s ease-out;
}
.NavBar li:hover > ul {
	display: block;
	position: absolute;
}

.NavBar li:hover li { float: none; }

.NavBar li:hover a { background: #4a535b; }

.NavBar li:hover li a:hover { background: #2c3e50; }

.NavBar li ul li { border-top: 0; }
.NavBar ul ul ul {
	left: 100%;
  top: 0;
}

.NavBar ul:before,
.NavBar ul:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}
.NavBar ul:after { clear: both; }

.MainContainer {
	background: #fffcf9;
	margin: auto;
	width: 80%;
	border-style:solid;
	border-width:thin;
	border-color:#e2e0d9;
	padding:1rem;
  color: red;
}
<div class="NavBarContainer" id="NavBarContainer">
<div class="NavBar">
  <ul>
    <li><a href="#">Item#1</a>
      <ul>
        <li><a href="#" onclick="GetData(this,'SubItem_11');">SubItem_11</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_12'); return false;">SubItem_12</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_13'); return false;">SubItem_13</a></li>
      </ul>
    </li>
		<li><a href="#">Item#2</a>
      <ul>
        <li><a href="#" onclick="GetData(this,'SubItem_21'); return false;">SubItem_21</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_22'); return false;">SubItem_22</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_23'); return false;">SubItem_23</a></li>
      </ul>   
		</li> 
		<li><a href="#">Item#3</a>
      <ul>
        <li><a href="#" onclick="GetData(this,'SubItem_31');">SubItem_31</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_32');">SubItem_32</a></li>
        <li><a href="#" onclick="GetData(this,'SubItem_33');">SubItem_33</a></li>
      </ul>   
		</li>     
  </ul>     
</div>
</div>


<div class="MainContainer" id="MainContainer">...</div>

答案 1 :(得分：1)

您不想操纵：after和：before伪元素，您想隐藏UL元素。您可以做的是，当用户单击从display到none的任何链接设置时隐藏UL（并且不要忘记在此之后删除属性）。

function GetData(TheClicked,WhichItem) {
  parent = TheClicked.parentElement.parentElement; //get the UL
  parent.style.display = 'none'; //hide it

  //In the working version, here is an Ajax call;
  document.getElementById("MainContainer").innerHTML = 'SomeTextSomeTextSomeTextSomeText';

  //remove the display set before
  setTimeout(function(){
    parent.style.removeProperty('display');
  }, 50)
}

请注意超时，如果您删除没有属性的属性，则.NavBar元素不会显示为hover状态，并且菜单会再次弹出。

一些建议：

  • 请勿在变量和函数的开头使用大写字母，而应将其留给javascript类（使用getData，theClicked和whichItem）
  • 有些click事件回调返回false，有些则没有，请了解回调中的event对象以及正确使用event.preventDefault()而不是返回false
  • 您不需要传递文本作为参数，可以使用theClicked.innerText来获取文本以简化代码
相关问题
最新问题