Question

Following piece of code produces two alert boxes, first one containing undefined, and second one containing the id attribute. when I add return false to the end, it only shows undefined, and doesnt return the id. I’m quite new in this jquery thing. The idea behind this code is, when you click on <a href="/abcd" id="abc"></a>, show the <ul class="abc"></ul>, which has its display initially set to none.

$(".navgbr-itm").click(function(){
  target_menu = $(this).attr("id");
  alert(target_menu);
  //$("."+target_menu).toggle();
});

I use jquery 1.8.2 and the jquery-ui 1.9 . I’m using jquery ui for sth not related to this snippet (for an image slider). And as a note, I have to cancel the navigation after the click.

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>

I tried the w3c validator with this page and it validates. I’m basically recreating my uni’s website for training purposes. And this file is run via a lighttpd server.

Answer 1

Try with this:

<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>

Here I introduce you to $.data jQuery utility. It helps you to store data in specific "data-*" attributes of your tag.

You can see more on jQuery Documentation:

http://api.jquery.com/jQuery.data/