jQuery .slideToggle not working

#webを上に置いたときに＃webdsn-drop divを表示しようとしています。 .slideToggle jqueryを使用していますが、上にスクロール/ホバーまたはクリックすると何も起こりません。イブがどこに間違っているのかわからない。また、webdsn-dropを非表示にしてWebサイトを開始したい。jQuery .slideToggle not working

HTMLは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 

<link rel="stylesheet" type="text/css" href="main.css"> 
<script src="script.js" type="text/javascript"></script> 

</head> 
<body> 

<div id="navbar"> 
<div id="nav-container"> 
    <h1>PORTFOLIO</h1> 
    <a href="#">Logo Design</a> 
    <a href="#">Business Cards</a> 
    <a href="posters+flyers.html">Posters & Flyers</a> 
    <a id="web" href="#">Website Design</a> 
</div> 
</div> 

<div id="webdsn-drop"> 
    <div id="border"> 
     <h1>WEBSITE DESIGN</h1> 
    </div> 

</div> 

</body> 
</html>

CSSは次のとおりです。

body { 
    background-color: #383838; 
} 

/*--------------Navigation Bar------------*/ 

#navbar { 
    width: 100%; 
    background-color: #fcfcfc; 
    overflow: auto; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    overflow: hidden; 
    z-index: 10; 

} 

#nav-container { 
    max-width: 950px; 
    min-width: 745px; 
    margin: 0 auto; 


} 

#nav-container h1 { 
    float: left; 
    margin: 0 auto; 
    padding-top: 10px; 
    font-family: "calibri light"; 
    font-size: 25px; 
    letter-spacing: 0.3em; 
    margin-left: 5px; 
    transition: color 0.3s ease; 

} 

#nav-container a { 
    float: right; 
    display: block; 
    padding: 15px 15px; 
    text-decoration: none; 
    color: black; 
    font-family: "calibri light", sans-serif; 
    font-size: 18px; 
    transition: background-color 0.5s ease; 

} 

#nav-container a:hover { 
    background-color: #f4f4f4; 
    transition: background-color 0.5s ease; 
} 

#nav-container a:active { 
    background-color: #bfbfbf; 
} 

#nav-container h1:hover { 
    color: #aaaaaa; 
    transition: color 0.3s ease; 
} 

#border{ 
    width: 950px; 
    margin: 0 auto; 
} 

#border h1{ 
    position: absolute; 
    border: solid; 
    border-color: white; 
    border-width: 1px; 
    display: inline; 
    padding: 10px 20px; 
    border-radius: 10px; 
} 


#webdsn-drop{ 
    background-color: #3f3f3f; 
    margin-top: 50px; 
    width: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 9; 
    font-family: 'calibri light'; 
    font-size: 12px; 
    letter-spacing: 5px; 
    height: 400px; 
    color: white; 

}

私のjqueryのは、次のとおりです。

$(document).ready(function(){ 
    $('#web').hover(function() { 
    $('#webdsn-drop').slideDown(); 
}, function() { 
    $('#webdsn-drop').slideUp(); 
}); 

});

出典

2017-06-29 AbuN2286

「これは機能していません」という問題は、。 – smarx

"#webが" $（ '＃web'）ではなく、$（ '＃web'）.hover'を意味するのでは？ – smarx

いいえいいえ。 .click .hover .mouseenterを試しましたが、何も起きていないようです。 – AbuN2286

スタート#webdsn-dropdisplay:noneであなたが最初のページをロードするときに、それは隠されます：

あなたがホバーを使用しているので、10

<div id="webdsn-drop" style="display:none"> 
    <div id="border"> 
    <h1>WEBSITE DESIGN</h1> 
    </div> 
</div>

その後、私はあなたが置くとdivを表示し、非表示にするslideDownとslideUpを使用して明示的にお勧めしたいとunhover：

$('#web').hover(function() { 
    $('#webdsn-drop').slideDown(); 
}, function() { 
    $('#webdsn-drop').slideUp(); 
});

の作業フィドル：https://jsfiddle.net/n0qne6gx/1/

（申し訳ありませんが、スタックオーバーフロースニペットは現時点では壊れているようですので、インラインで作業コードを共有することはできません）

出典

2017-06-29 01:44:22 smarx

答えて

関連する問題