Почему не работает мой код выпадающего меню

Выпадающее меню не будет работать! для css я использовал «display: none»; чтобы скрыть список, но Im задается вопросом, является ли это наиболее эффективным способом выполнения выпадающего меню? Я использовал эту концепцию из проекта codeacademy.Почему не работает мой код выпадающего меню

Я уверен, что здесь может быть какой-то код, который может заставить вас съежиться, но, пожалуйста, успокойтесь, я абсолютно новичок в программировании! Спасибо!

$(document).ready(function() { 
 
    $('p').hover(function() { 
 
    $(this).find('ul').fadeToggle(400); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main { 
 
    margin: 0 auto; 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 
.container { 
 
    max-width: 230px; 
 
    max-height: 300px; 
 
    margin: 0 auto; 
 
    background-color: #024F79; 
 
} 
 
p { 
 
    text-align: center; 
 
    color: #fff; 
 
    border-bottom: 1px solid #fff; 
 
    font-size: 18px; 
 
    padding: 8px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 
ul li { 
 
    padding: 10px; 
 
    border-bottom: 1px solid white; 
 
    color: white; 
 
    font-size: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 

 
<body> 
 
    <div class="main"> 
 
    <div class="container"> 
 
     <p>How do I ?</p> 
 
     <ul> 
 
     <li>View my Transcript</li> 
 
     <li>View my Conformation Page</li> 
 
     <li>Register for Courses</li> 
 
     <li>Pay for Courses/Exams</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</body>

источник

2015-01-13 Walt

«Это не работает» - это не вопрос. –

Вам не следует делать это так, потому что, как только вы перестанете парить тэг 'p' (чтобы выбрать пункт меню), меню исчезнет. – APAD1

@ APAD1 спасибо! – Walt

$(this).find('ul') будет выглядеть внутри p элемента в результате использования this в зависимости от контекста. Вы можете использовать .next()

$(this).next('ul').fadeToggle(400);

Тем не менее, лучше было бы перестроить свой HTML и обернуть все p и ul с div, который имеет идентификатор для того, чтобы облегчить замирание UI.

<div id="menu"> 
<p>How do I ?</p> 
<ul> 
    <li>View my Transcript</li> 
    <li>View my Conformation Page</li> 
    <li>Register for Courses</li> 
    <li>Pay for Courses/Exams</li> 
</ul> 
</div>

И затем использовать исходный код, за исключением таргетинг #menu

$('#menu').hover(function() { 
$(this).find('ul').fadeToggle(400); 
});

jsFiddle Demo

источник

2015-01-13 00:06:38

Спасибо, Трэвис !! – Walt

работал отлично! Спасибо! – Walt

Ваш первый комментарий помог мне понять, почему '$ (this) .find ('ul')' не работал. Для практики я отредактировал эту строку до '$ ('ul'). Find ('li')', но этот код не работал. Зачем? – Walt

Может быть, вместо того, чтобы использовать JavaScript, вы можете использовать чистые CSS решения, если не вам хочу сделать анимацию.

источник

2015-01-13 00:27:41

Почему не работает мой код выпадающего меню

ответ

Смежные вопросы