Не удается оставить подменю открытым после нажатия одного из его элементов

Я использую функцию jquery click для отображения подменю при нажатии на элемент меню. Я хочу, чтобы подменю оставалось открытым после того, как я щелкну один из его элементов, пока я не вернусь к другому элементу в главном меню. Я пробовал несколько решений, читал несколько сообщений и купил книгу по 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="index.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="index.php?content=library" title="Our Library">Library</a></li>
          <li class="nosub"><a href="index.php?content=calendary" title="Calendar of Events">Calendar of Events</a></li>
          <li class="nosub"><a href="index.php?content=missions" title="Our Mission Work">Our Mission Work</a></li>
          <li class="nosub"><a href="index.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