[HTML, jQuery] Не работает выпадающий список - не скрывается - Помощь студентам

makzimus1980 · 27.02.2017, 23:36

Друзья, я начинающий фронтендер прошу тапками сильно не кидать. Знаю что есть ошибка, знаю где, но не знаю почему? Почему не работает скрипт?

Код:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascrpt" > 
$(document).ready(function(){
    $("ul.submenu").hide();
    });
 </script>

Этим я пытался скрыть меню для кода ниже, но кажется что то не то с (document)

Код:

<!DOCTYPE html>
<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
   <title>Modus</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascrpt" > 
$(document).ready(function(){
    $("ul.submenu").hide();
    });
 </script>
   <link rel="stylesheet" type="text/css" href="styles/new1.css"/>
   </head>
   
   
   <body>
   <div id="main">
   <nav>
        <img id="logo" src="images/logo.jpg">  
         
        <a href=""class="menu">HOME </a>
        <a href=""class="menu">ABOUT </a>
        <a href=""class="menu">SERVICES </a>
        
        <ul><li id="red"><a href="" >PORTFOLIO </a>
            <ul class="submenu">
            <li><a href="#">>Portfolio 2 column page </a></li>
            <li><a href="#">>Portfolio 2 column page </a></li>
            <li><a href="#">>Portfolio 2 column page </a></li>
            </li>
            </ul>
        </ul>
        
        <a href=""class="menu">BLOG </a>
        <a href=""class="menu">FEATURES </a>
        <a href=""class="menu">CONTACTS </a>
        
        <a href=""> 
        <img id="lupa" src="images/lupa.jpg"> </a>
        
        
   </nav>
   <div class="top-line">  </div>
     
     <div id="home">
      
    <a href="#" class="ileft"> <img src="images/left.jpg"> </a>
    <img src="images/title.jpg">
     <img src="images/words.jpg"></a>
   <a href="#" class="iright"> <img src="images/right.jpg"> </a>
   
   </div>

Вадим Мошев · 28.02.2017, 05:36

Код:

<ul><li id="red"><a href="" >PORTFOLIO </a>
            <ul class="submenu">
            <li><a href="#">>Portfolio 2 column page </a></li>
            <li><a href="#">>Portfolio 2 column page </a></li>
            <li><a href="#">>Portfolio 2 column page </a></li>
            </li>
            </ul>
        </ul>

Если не ошибаюсь, то списки (UL в частности) должен содержать только <li> внутри себя. У вас это не соблюдается. Попробуйте переверстать примерно так:

Код:

<ul class="menu">
	<li>что-то</li>
	<li>что-то</li>
	<li>что-то</li>
	<li>
		<ul class="submenu">
			<li>что-то</li>
			<li>что-то</li>
			<li>что-то</li>
		</ul>
	</li>
</ul>

И ещё:

Код:

$("ul.submenu").hide();

Лучше просто написать:

Код:

$(".submenu").hide();

если, правда, .submenu у вас будет один на всю страницу, но в этом случае лучше использовать id, а не class - работать быстрее будет.

28.02.2017, 05:36	#2
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	Код: `<ul><li id="red"><a href="" >PORTFOLIO </a> <ul class="submenu"> <li><a href="#">>Portfolio 2 column page </a></li> <li><a href="#">>Portfolio 2 column page </a></li> <li><a href="#">>Portfolio 2 column page </a></li> </li> </ul> </ul>` Если не ошибаюсь, то списки (UL в частности) должен содержать только <li> внутри себя. У вас это не соблюдается. Попробуйте переверстать примерно так: Код: `<ul class="menu"> <li>что-то</li> <li>что-то</li> <li>что-то</li> <li> <ul class="submenu"> <li>что-то</li> <li>что-то</li> <li>что-то</li> </ul> </li> </ul>` И ещё: Код: `$("ul.submenu").hide();` Лучше просто написать: Код: `$(".submenu").hide();` если, правда, .submenu у вас будет один на всю страницу, но в этом случае лучше использовать id, а не class - работать быстрее будет.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Выпадающий блок на JQUERY	Minus_yu	JavaScript, Ajax	4	16.10.2013 22:33
Выпадающий список.	viktor22122	Помощь студентам	0	02.06.2013 09:20
Выпадающий список	aza-mat	Microsoft Office Excel	11	04.05.2011 06:54
Выпадающий список	чебургатор	HTML и CSS	2	13.05.2009 19:58
выпадающий список	Toxa	Microsoft Office Excel	2	23.04.2007 09:40