我有这个网站，你点击一个角色和一个小板，出现角色的描述。这是通过切换一个'active'类来完成的，它将vh：-200的顶部设置为10的vh。
现在，当我点击一个菜单项时......所有的电路板都需要再次获得-200vh的顶部。
HTML
<div id="nav">
<ul>
<li class="item active">
<a><img id="menu_button" src="images/Menu/home.png"></a>
<div class="board" style=
"background-image: url(images/borden/bord_home.png);"></div>
</li>
<li class="item characters">
<a><img id="menu_button" src="images/Menu/about.png"></a>
<ul class="characters_container">
<li class="character" data-id="samB" id="sam" style=
"background-image: url(images/personages/Sam.png);"></li>
<li class="character" data-id="piepieB" id="piepie" style=
"background-image: url(images/personages/Piepie.png);"></li>
<li class="character" data-id="royB" id="roy" style=
"background-image: url(images/personages/Roy.png);"></li>
<li class="character" data-id="spinB" id="spin" style=
"background-image: url(images/personages/spin.png);"></li>
<li class="character" data-id="oetjeB" id="oetje" style=
"background-image: url(images/personages/Oetje.png);"></li>
<li class="character" data-id="mosjeB" id="mosje" style=
"background-image: url(images/personages/Mosje.png);"></li>
<li class="character" data-id="minaB" id="mina" style=
"background-image: url(images/personages/Mina.png);"></li>
<li class="character" data-id="elisaB" id="elisa" style=
"background-image: url(images/personages/Elisa.png);"></li>
<li class="character" data-id="bellaB" id="bella" style=
"background-image: url(images/personages/Bella.png);"></li>
</ul>
<ul class="character_board_container">
<li class="character_board" id="samB" style=
"background-image: url(images/personages/sam_bord.png);"></li>
<li class="character_board" id="piepieB" style=
"background-image: url(images/personages/piepie_bord.png);">
</li>
<li class="character_board" id="royB" style=
"background-image: url(images/personages/roy_bord.png);"></li>
<li class="character_board" id="spinB" style=
"background-image: url(images/personages/spin_bord.png);"></li>
<li class="character_board" id="oetjeB" style=
"background-image: url(images/personages/oetje_bord.png);">
</li>
<li class="character_board" id="mosjeB" style=
"background-image: url(images/personages/mosje_bord.png);">
</li>
<li class="character_board" id="minaB" style=
"background-image: url(images/personages/mina_bord.png);"></li>
<li class="character_board" id="elisaB" style=
"background-image: url(images/personages/elisa_bord.png);">
</li>
<li class="character_board" id="bellaB" style=
"background-image: url(images/personages/bella_bord.png);">
</li>
</ul>
</li>
<li class="item">
<a><img id="menu_button" src="images/Menu/news.png"></a>
<div class="board" style=
"background-image: url(images/borden/bord_agenda.png);">
<div id="frame_wrapper_agenda">
<iframe frameborder="none" src="agenda.php"></iframe>
</div>
</div>
</li>
<li class="item foto">
<a><img id="menu_button" src="images/Menu/camera.png"></a>
</li>
<li class="item video">
<a><img id="menu_button" src="images/Menu/play.png"></a>
</li>
<li class="item">
<a><img id="menu_button" src="images/Menu/shop.png"></a>
<div class="board" style=
"background-image: url(images/borden/bord_shop.png);">
<a href="http://www.hetmooisteboek.nl/product/piepie-en-sam/"
id="boek1" target="_blank"></a> <a href=
"http://www.hetmooisteboek.nl/product/piepie-sam-en-het-grote-geheim/"
id="boek2" target="_blank"></a>
</div>
</li>
<li class="item">
<a><img id="menu_button" src="images/Menu/contact.png"></a>
<div class="board" style=
"background-image: url(images/borden/bord_contact.png);">
<a href="#" id="insta"></a> <a href="#" id="facebook"></a>
<a href="#" id="twitter"></a>
<div id="form_wrapper_contact">
<form action="#" method="post">
<input name="contact_naam" placeholder="naam" type=
"text"> <input name="contact_email" placeholder="email"
type="text">
<textarea border="none" name=
"contact_tekst"></textarea> <input name=
"contact_submit" type="submit" value="verstuur!">
</form>
</div>
</div>
</li>
</ul>
</div>
JS代码
$('#nav > ul > li.item').on('click', function () {
//This line doesn't work.. when clicked on a menu item, it has to remove the
//active class on all boards as done a little further down.
//by adding this line the characters become unclickable.
$('.character_board_container li').removeClass('active');
$('#nav > ul > li').removeClass('active');
$(this).toggleClass('active');
});
$('.characters_container li').on('click', function () {
//this does his job...it removes the class active from the other boards
//when clicked on a different character
$('.character_board_container li').removeClass('active');
var character = $(this).attr('data-id');
$('.character_board_container #' + character).toggleClass('active');
});
任何想法？帮助将受到关注（：
Greets，Olcan
答案 0 :(得分：0)
检查`.on'方法原型
其$(document).on(event,selector, function() {});
因此您需要定义点击事件，例如$(document).on('click','#nav > ul > li.item', function() {});
尝试以下代码
/* Remove Below event call
$(document).on('click','#nav > ul > li', function(){
//$('.character_board_container li').removeClass('active');
//$('#nav > ul > li').removeClass('active');
//$(this).toggleClass('active');
}); */
$(document).on('click','.characters_container li', function() {
$('.character_board_container li').removeClass('active');
var character = $(this).attr('data-id');
$('.character_board_container #' + character).toggleClass('active');
});