CSS3 Выпадающего меню поддельная JS вопросы

Question

Я пытаюсь сделать выпадающего меню стилизованного с Jquery и CSS3. Я выполнил эту работу, и это именно то, что я хочу. Единственная проблема заключается в том, что это трюк с JQuery.

Я хочу, чтобы скрыть/показать div, когда я нажимаю на одну из моих кнопок меню. Проблема в том, что она не выполняет эту работу. Но он работает без трюка.

Вот код рабочего:

https://jsfiddle.net/74ca3epv/2/

Вы можете увидеть это работает, но

удалить display:none из .styledSelect

, и вы увидите, что шоу/hide div больше не работает. Надеюсь, вы поймете, что я имею в виду. Все комментарии приветствуются :) спасибо!

Answer 1

Вы должны внести изменения здесь:

$listItems.click(function (e) { 
     e.stopPropagation(); 
     $styledSelect.text($(this).text()).removeClass('active'); 
     $this.val($(this).attr('rel')); 
     $list.hide(); 
     //alert($(this).attr('rel')); 

     if($(this).attr("rel")=="reservation1"){ 
       $("#information").hide(); 
       $("#reservation").show(); 
      } 
      if($(this).attr("rel")=="information1"){ 
       $("#reservation").hide(); 
       $("#information").show(); 
      } 
      if($(this).attr("rel")=="choose1"){ 
       $("#reservation").hide(); 
       $("#information").hide(); 
      } 

     /* alert($this.val()); Uncomment this for demonstration! */ 
    }); 

Проверить Fiddle link.