javascript - 操纵 :before and :after with javascript

Question

我有一个下拉导航栏(fiddle 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>

Answer 1

你不想操纵 :after 和 :before 伪元素，你想隐藏 UL 元素。您可以做的是在用户单击任何链接设置时隐藏 UL display至 none (并且不要忘记在此之后删除该属性)。

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 获取它。简化您的代码