Не срабатывает js код

189

20 мая 2017, 19:15

В одной статье нашел код выпадающего меню:

http://javascript.ru/forum/misc/48342-js-raskryvayushhijjsya-spisok.html

перенес на jsfiddle, но меню УЖЕ выпало... Подскажите в чем там промах?

jsfiddle

Answer 1

Промах в том, что надо подключать Jquery

$(document).ready(function(){ 
	    $("ul").hide(); 
	    $("ul li:odd").css("background-color", "#efefef"); 
	    $(".box h3").click(function(){ 
	        $(this).next().slideToggle(); 
	        var text = $("span",this).text(); 
	        $("span",this).text(text != "+" ? "+" : "-") 
	    }); 
	});

#center { 
	    width: 260px; 
	    margin: 0 auto; 
	    margin-top: 25px; 
	    } 
	#headline { 
	     text-align: center; 
	    } 
	.box { 
	    width: 250px; 
	    margin: 10px auto; 
	    background: #fff; 
	    border: 1px solid #d1d1d1; 
	    padding: 4px; 
	    font-family: Georgia, Helvetica, sans-serif; 
	    -moz-border-radius: 5px; 
	    -webkit-border-radius: 5px; 
	    -moz-box-shadow: 0px 0px 10px #ddd; 
	    -webkit-box-shadow: 0px 0px 10px #ddd; 
	    } 
	h3 { 
	    -moz-border-radius: 5px; 
	    -webkit-border-radius: 5px; 
	    padding: 5px; 
	    background: -moz-linear-gradient(center top, #efefef 0%,#e0e0e0 100%); 
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef),color-stop(1, #e0e0e0)); 
	    border: 1px solid #d1d1d1; 
	    color: #c1c1c1; 
	    font-size: 13px; 
	    font-weight: normal; 
	    text-shadow: 1px 1px 0px #fff; 
	    margin:0; 
	    cursor: pointer; 
	    } 
	h3 span { 
	    float: right; 
	    cursor: pointer; 
	    } 
	h3 span:hover { 
	    text-shadow: 0px 0px 3px #a1eeff; 
	    } 
	ul { 
	    padding: 5px; 
	    overflow: hidden; 
	    margin:0; 
	    } 
	ul li { 
	    font-size: 13px; 
	    list-style-type: square; 
	    list-style-position: inside; 
	    color: #a1a1a1; 
	    padding: 5px; 
	    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<body> 
	<div id="wrap"> 
	    <div id="headline"> 
	        Раскрывающийся список на jQuery 
	    </div> 
	        <div id="center"> 
	            <div class="box"> 
	                <h3>Список №1<span class="expand">+</span></h3> 
	                <ul> 
	                    <li>Пункт №1</li> 
	                    <li>Пункт №2</li> 
	                    <li>Пункт №3</li> 
	                    <li>Пункт №4</li> 
	                </ul> 
	            </div> 
	        </div> 
	</div> 
	</body>