以下代码段生成两个警告框,第一个包含undefined
,第二个包含id属性。当我将return false
添加到结尾时,它只显示undefined
,并且不会返回ID。我对这个jquery事情很新。此代码背后的想法是,当您点击<a href="/abcd" id="abc"></a>
时,会显示<ul class="abc"></ul>
,其显示最初设置为 none 。
$(".navgbr-itm").click(function(){
target_menu = $(this).attr("id");
alert(target_menu);
//$("."+target_menu).toggle();
});
我使用jquery 1.8.2和jquery-ui 1.9。我正在使用jquery ui与这个片段无关(对于图像滑块)。作为一个注释,我必须在点击后取消导航。
HTML:
<nav id="main-navgbr" class="htmlf-block">
<ul id="main-navgbr-itms" class="navgbr-itms">
<li id="main-nvgbr-itm-academc" class="navgbr-itm"><a
href="/akademik" class="navgbr-itm">Akademik</a></li>
<li id="main-nvgbr-itm-idari" class="navgbr-itm"><a
href="/idari" class="navgbr-itm">İdari / Personel</a></li>
<li id="main-nvgbr-itm-ogrn" class="navgbr-itm"><a
href="/ogrenci" class="navgbr-itm">Öğrenci</a></li>
<li id="main-nvgbr-itm-arastr" class="navgbr-itm"><a
href="/arastirma" class="navgbr-itm">Araştırma</a></li>
<li id="main-nvgbr-itm-hast" class="navgbr-itm"><a
href="/hastaneler" class="navgbr-itm">Hastaneler</a></li>
<li id="main-nvgbr-itm-ktph" class="navgbr-itm"><a
href="/kutuphane" class="navgbr-itm">Kütüphane</a></li>
<li id="main-nvgbr-itm-bshi" class="navgbr-itm"><a
href="/bshi" class="navgbr-itm">Basın / Halkla İlişkiler</a></li>
<li id="main-nvgbr-itm-blog" class="navgbr-itm"><a
href="/bloglar" class="navgbr-itm">Bloglar</a></li>
</ul>
</nav>
我在这个页面上尝试了w3c验证器并验证了它。我基本上是为了培训而重建我的uni网站。此文件通过lighttpd
服务器运行。
答案 0 :(得分:0)
试试这个:
<a href="#" class="menuitem" data-target-menu="mymenu">Click Me</a>
<ul id="mymenu" style="display:none;">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
<script>
$(function() {
$('.menuitem').click(function() {
$('ul#' + $(this).data('target-menu')).toggle();
}
});
</script>
在这里,我向您介绍$.data
jQuery实用程序。它可以帮助您将数据存储在代码的特定"data-*"
属性中。
您可以在jQuery文档中看到更多信息:
答案 1 :(得分:0)
您在HTML中嵌套了.navgbr-item
个元素。这意味着单击链接将触发a
和li
元素的事件处理程序。 a
元素没有ID,因此您获得了undefined
。
不是将事件处理程序绑定到li
元素和a
元素,而是仅将其绑定到li
元素:
$("li.navgbr-itm").click(function(){
target_menu = $(this).attr("id");
alert(target_menu);
//$("."+target_menu).toggle();
});
HTML5 data-
attributes也是存储数据的好方法。