Подменюто не може да остане отворено след щракване върху един от елементите му

Използвам функцията за щракване на jquery, за да покажа подменю, когато се щракне върху елемент от менюто. Искам подменюто да остане отворено, след като щракна върху един от елементите му, докато не се върна към друг елемент в главното меню. Опитах множество решения, прочетох множество публикации и купих книга за jquery и не намерих отговор. Подозирам, че проблемът е, че когато се щракне върху li в ul, не е възможно да се промени дисплеят на капсулиращия ul. Но ето последният ми опит с код. (Всяка помощ наистина ще бъде оценена. На път съм да се откажа и просто да покажа всички менюта, като извадя display:hide в css. Но реших, че ще видя дали някой тук може да отговори на този въпрос.)

Подходящ Html:

     <div id="navbar">          

    <div style="margin-top:5em; margin-left:0em;">    
     <ul class = "nav-level1">
        <li class="nosub"><a href="/bgindex.php?content=bethhome" title="Go to home page">Home</a></li>
      <li class="parent"> <a href = "#" >About Us</a>   
            <ul class="nav-level2">
                <li class="nav-whoweare"><a href ="index.php?content=whoweare" title="Who We Are">Who We Are</a></li> 
                <li class="nav-whoweare"><a href ="index.php?content=ourmission" title="Our Mission and Values">Our Mission and Values</a></li> 
                <li class="nav-whoweare"><a href ="index.php?content=ourhistory" title="Our History">Our History</a></li> 
                <li class="parent2"><a href = "#">Our Interim Pastors</a>
                   <ul class = "nav-level3">
                     <li class="nav-whoweare"><a href ="index.php?content=ourpastor" title="Rev. Charles Webb">Rev. Charles Webb</a></li> 
                     <li class="nav-whoweare"><a href ="index.php?content=ourpastor2" title="Vicar Daniel Dockery">Vicar Daniel Dockery</a></li> 

                    </ul>
                </li>                        

              </ul> 
            </li>     
          <li class="nosub"><a href="/bgindex.php?content=library" title="Our Library">Library</a></li>
          <li class="nosub"><a href="/bgindex.php?content=calendary" title="Calendar of Events">Calendar of Events</a></li>
          <li class="nosub"><a href="/bgindex.php?content=missions" title="Our Mission Work">Our Mission Work</a></li>
          <li class="nosub"><a href="/bgindex.php?content=ouractivities" title="Our Activities, Groups and Events">Our Activities</a></li>    

    </ul>                                                                         
    </div> <br />

Моят CSS код:

#navbar ul.nav-level2, #navbar ul.nav-level3
{
   font-size:.8em;
   display:none;
} 

#navbar ul.nav-level2 li
{
  margin-left:1em;  
}

} 
 #navbar ul.nav-level3 li
{
  margin-left:2em;
}

Моите jquery скриптове:

  <script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.parent').click(function(event) {
      $('.nav-level2').show();
    });
});
</script>   

<script type="text/javascript">
$(document).ready(function() {
    $('.nosub').click(function(event) {
       $('.nav-level3').hide();
       $('.nav-level2').hide();
     });
});
</script> 


<script type="text/javascript">
$(document).ready(function() {
    $('.parent2').click(function(event) {
       $('.nav-level3').show();
       $('.nav-level2').show();
     });
});
</script> 

<script type="text/javascript">    //testng script
$(document).ready(function() {
    $('.nav-whoweare').click(function(event) {

        $'.nav-level2'}.show();
     });
});
</script>

html click jquery submenu
person Kkarinisme    schedule 27.02.2015    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Вашият код е пълен с правописни грешки. Моля, бъдете по-внимателни... и не забравяйте да създадете jsfiddle и да използвате програма за отстраняване на грешки (изградена от Google Crome в програмата за отстраняване на грешки например.)

освен това hover() е по-подходящ

ето вашия работен код:

$(document).ready(function() {
    $('.parent').hover(
        function() {
            $('.nav-level2').show();
        },
        function() {
            $('.nav-level2').hide();
        }
    );
    $('.parent2').hover(
        function() {
            $('.nav-level3').show();
            $('.nav-level2').show();
        },
        function() {
            $('.nav-level3').hide();
            $('.nav-level2').hide();
        }
    );

    $('.nav-whoweare').hover(
        function() {
            $('.nav-level2').show();
        },
        function() {
            $('.nav-level2').hide();
        }
    );
});
person eapo    schedule 27.02.2015
comment
Мислех, че задържането на мишката не трябва да се използва поради проблема с мобилните телефони, които не реагират добре, и вместо това трябва да се използва това кликване. - person Kkarinisme; 28.02.2015
comment
можете да използвате задържане на курсора на мишката върху настолен компютър и докосване на събития на мобилно устройство - person eapo; 09.03.2015