我怎样才能让这个.slideToggle工作？

时间：2017-06-30 01:35:50

标签： jquery html css navigation

当我使用.slideToggle / .slideDown / .slideUp时，不会发生任何操作，我不知道如何制作它，以便在滚动#web时导航菜单会丢失。我引用的导航菜单是＃webdsn-drop。

感谢您的帮助！

HTML：

<DOCTYPE! HTML>
<html>

<head>

    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src='script.js' type='text/javascript'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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="webdsn-content">
                <h2 id="webname">WEBSITE DESIGN<h2>
            </div>
        </div>  


  <div id="banner-container">
    <h1>LOREM IPSUM<br>SAMPLE<h1> 
    <h2>Lorem Ipsum Sample Lorem Ipsum Sample</h2>
  </div>

 <div id="thmbnl-container">  

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/workspace-banners_23-2147509206.jpg">
      <h1>Web Design</h1>
    </a> 
  </div>


   <div class="ctgrs-container">
    <a href="posters+flyers.html">
      <img src="https://image.freepik.com/free-psd/blue-company-poster_23-2147493194.jpg">
      <h1>Posters & Flyers</h1>
    </a>  
  </div> 


   <div class="ctgrs-container">
     <a href="#">
      <img src="https://image.freepik.com/free-vector/blue-wave-business-card-design_1017-4370.jpg">
      <h1>Business Cards</h1>
     </a> 
  </div>

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/abstract-logo-template_23-2147490980.jpg">
      <h1>Logo Design</h1>
     </a> 
  </div>

  </div> 

  <h2 id="recent-title">Recent Projects</h2>
  <div id="recent">
    <div id="recent-container">
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
    </div>
  </div>

</body>

CSS：

body {
    margin: 0 auto;
    width: 950px;
    /* border: solid;
    border-color: black; */
    background-color: #f2f2f2;

}

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

#navbar {
    width: 100%;
    background-color: white;
    overflow: auto;
    position: fixed;
    left: 0px;
    top: 0px;
    border-bottom: solid;
    border-width: 1px;
    border-color: #d8d8d8;
    overflow: hidden;
    z-index: 10;
}

#nav-container {
    max-width: 950px;
    min-width: 750px;
    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;
}

#webdsn-drop{
    padding: 75px 0 0 0;
    background-color: rgba(252, 252, 252, 0.95);
    border-bottom: solid 1px #d8d8d8;
    height: 200px;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    z-index: 9;
    display: none;
}

#webdsn-content{
    width: 950px;
    margin: 0 auto;
}

#webname{
    color: black;
    border: solid;
    border-width: 1px;
    border-radius: 7.5px;
    padding: 5px 15px;
    display: inline;
    font-family: 'calibri light';
    letter-spacing: 2.5px;  
}

/*--------------Banner------------*/

#banner-container {
    margin-top: 75px ;
    margin-bottom: 25px;
    text-align: center;
    background-color: white;
    padding: 75px 0px;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;

}

#banner-container h1 {
    font-family: "calibri light";
    font-size: 35px;
    letter-spacing: 0.2em;

}

#banner-container h2 {
    width: 950px;
    font-family: "calibri light";
    font-size: 18px;
    letter-spacing: 0.2em;
}

/*-----------Category Thumbnails---------*/

#thmbnl-container {
    width: 950px;   
    display: flex;
    justify-content: space-between;
}

.ctgrs-container {
    background-color: white;
    display: inline-block;
    padding: 13px 13px 0px 13px;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    box-shadow: none;
    transition: box-shadow 0.25s ease;  
    margin-bottom: 25px;
}

.ctgrs-container img {
    height: 190px;
    width: 190px;
}


.ctgrs-container h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    line-height: 25px;
}

.ctgrs-container a {
    text-decoration: none;
    color: black;
}


.ctgrs-container:hover {
    box-shadow: 0px 0px 30px 0px #727272;
    transition: box-shadow 0.25s ease;
}

/*----------Recent Projects----------*/

#recent-container {
    width: 950px;
    height: 275px;
    background-color: ;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    margin-bottom: 25px;
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}

.thmbnl-recent {
    padding: 20px 13px 0px 13px;
    width: 190px;
    display: inline-block;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    background-color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;

}

.thmbnl-recent h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    margin: 0 auto;
    padding: 10px 0px;
    letter-spacing: 2px;
}

#recent-title {
    font-family: "calibri light";
    text-align: center;
    width: 950px;
    background-color: white;
    margin: 0 auto;
    padding: 10px 0px;
    position: relative;
    z-index: 2;
    border-top: solid;
    border-right: solid;
    border-left: solid;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    border-width: 1.5px;
    border-color: #d8d8d8;
}

.thmbnl-recent:hover {
    background-color: #e8e8e8;
    transition: background-color 0.3s ease;
}

.thmbnl-recent:active {
    background-color: #d1d1d1;
}


/*--------SLIDE IMAGE---------*/

#gallery-container {
    margin: 75px 0px 45px 0px;
    text-align: center;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;
}

#slide-section {
    text-align: center;
    background-color: white;
    padding: 20px 20px 0px 20px;

}

#gallery-container h1{
    padding: 15px 0 15px 0;
    margin: 0;
    font-family: "calibri light";
    font-size: 30px;
    border-bottom: solid;
    background-color: white;
    border-color: #d8d8d8;
    border-width: 1.5px;
    box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
    z-index: 3;
    position: relative;
}

#imgrow {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;

}

JQUERY：

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

});

2 个答案:

答案 0 :(得分：1)

这可能是我认为您正在寻找的正确移动下拉列表。

离开JB Lovo's回答。

2015.275.14.1,Siboney by The Tailor Maids

$(document).ready(function(){
    $('#web').hover(function(){
        $('#webdsn-drop').slideDown(500);
    },
    function(){
      $('#webdsn-drop').hover(function(){}, function(){$(this).slideUp(500);});
    });
});
body {
    margin: 0 auto;
    width: 950px;
    /* border: solid;
    border-color: black; */
    background-color: #f2f2f2;

}

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

#navbar {
    width: 100%;
    background-color: white;
    overflow: auto;
    position: fixed;
    left: 0px;
    top: 0px;
    border-bottom: solid;
    border-width: 1px;
    border-color: #d8d8d8;
    overflow: hidden;
    z-index: 10;
}

#nav-container {
    max-width: 950px;
    min-width: 750px;
    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;
}

#webdsn-drop{
    padding: 75px 0 0 0;
    background-color: rgba(252, 252, 252, 0.95);
    border-bottom: solid 1px #d8d8d8;
    height: 200px;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    z-index: 9;
    display: none;
}

#webdsn-content{
    width: 950px;
    margin: 0 auto;
}

#webname{
    color: black;
    border: solid;
    border-width: 1px;
    border-radius: 7.5px;
    padding: 5px 15px;
    display: inline;
    font-family: 'calibri light';
    letter-spacing: 2.5px;  
}

/*--------------Banner------------*/

#banner-container {
    margin-top: 75px ;
    margin-bottom: 25px;
    text-align: center;
    background-color: white;
    padding: 75px 0px;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;

}

#banner-container h1 {
    font-family: "calibri light";
    font-size: 35px;
    letter-spacing: 0.2em;

}

#banner-container h2 {
    width: 950px;
    font-family: "calibri light";
    font-size: 18px;
    letter-spacing: 0.2em;
}

/*-----------Category Thumbnails---------*/

#thmbnl-container {
    width: 950px;   
    display: flex;
    justify-content: space-between;
}

.ctgrs-container {
    background-color: white;
    display: inline-block;
    padding: 13px 13px 0px 13px;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    box-shadow: none;
    transition: box-shadow 0.25s ease;  
    margin-bottom: 25px;
}

.ctgrs-container img {
    height: 190px;
    width: 190px;
}


.ctgrs-container h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    line-height: 25px;
}

.ctgrs-container a {
    text-decoration: none;
    color: black;
}


.ctgrs-container:hover {
    box-shadow: 0px 0px 30px 0px #727272;
    transition: box-shadow 0.25s ease;
}

/*----------Recent Projects----------*/

#recent-container {
    width: 950px;
    height: 275px;
    background-color: ;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    margin-bottom: 25px;
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}

.thmbnl-recent {
    padding: 20px 13px 0px 13px;
    width: 190px;
    display: inline-block;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    background-color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;

}

.thmbnl-recent h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    margin: 0 auto;
    padding: 10px 0px;
    letter-spacing: 2px;
}

#recent-title {
    font-family: "calibri light";
    text-align: center;
    width: 950px;
    background-color: white;
    margin: 0 auto;
    padding: 10px 0px;
    position: relative;
    z-index: 2;
    border-top: solid;
    border-right: solid;
    border-left: solid;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    border-width: 1.5px;
    border-color: #d8d8d8;
}

.thmbnl-recent:hover {
    background-color: #e8e8e8;
    transition: background-color 0.3s ease;
}

.thmbnl-recent:active {
    background-color: #d1d1d1;
}


/*--------SLIDE IMAGE---------*/

#gallery-container {
    margin: 75px 0px 45px 0px;
    text-align: center;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;
}

#slide-section {
    text-align: center;
    background-color: white;
    padding: 20px 20px 0px 20px;

}

#gallery-container h1{
    padding: 15px 0 15px 0;
    margin: 0;
    font-family: "calibri light";
    font-size: 30px;
    border-bottom: solid;
    background-color: white;
    border-color: #d8d8d8;
    border-width: 1.5px;
    box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
    z-index: 3;
    position: relative;
}

#imgrow {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;

}

答案 1 :(得分：0)

您错过了关闭<h2 id="webname">WEBSITE DESIGN</h2>

如果您将鼠标悬停在网站设计上，则会出现下拉菜单。那是你在找什么？

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

});
body {
    margin: 0 auto;
    width: 950px;
    /* border: solid;
    border-color: black; */
    background-color: #f2f2f2;

}

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

#navbar {
    width: 100%;
    background-color: white;
    overflow: auto;
    position: fixed;
    left: 0px;
    top: 0px;
    border-bottom: solid;
    border-width: 1px;
    border-color: #d8d8d8;
    overflow: hidden;
    z-index: 10;
}

#nav-container {
    max-width: 950px;
    min-width: 750px;
    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;
}

#webdsn-drop{
    padding: 75px 0 0 0;
    background-color: rgba(252, 252, 252, 0.95);
    border-bottom: solid 1px #d8d8d8;
    height: 200px;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    z-index: 9;
    display: none;
}

#webdsn-content{
    width: 950px;
    margin: 0 auto;
}

#webname{
    color: black;
    border: solid;
    border-width: 1px;
    border-radius: 7.5px;
    padding: 5px 15px;
    display: inline;
    font-family: 'calibri light';
    letter-spacing: 2.5px;  
}

/*--------------Banner------------*/

#banner-container {
    margin-top: 75px ;
    margin-bottom: 25px;
    text-align: center;
    background-color: white;
    padding: 75px 0px;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;

}

#banner-container h1 {
    font-family: "calibri light";
    font-size: 35px;
    letter-spacing: 0.2em;

}

#banner-container h2 {
    width: 950px;
    font-family: "calibri light";
    font-size: 18px;
    letter-spacing: 0.2em;
}

/*-----------Category Thumbnails---------*/

#thmbnl-container {
    width: 950px;   
    display: flex;
    justify-content: space-between;
}

.ctgrs-container {
    background-color: white;
    display: inline-block;
    padding: 13px 13px 0px 13px;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    box-shadow: none;
    transition: box-shadow 0.25s ease;  
    margin-bottom: 25px;
}

.ctgrs-container img {
    height: 190px;
    width: 190px;
}


.ctgrs-container h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    line-height: 25px;
}

.ctgrs-container a {
    text-decoration: none;
    color: black;
}


.ctgrs-container:hover {
    box-shadow: 0px 0px 30px 0px #727272;
    transition: box-shadow 0.25s ease;
}

/*----------Recent Projects----------*/

#recent-container {
    width: 950px;
    height: 275px;
    background-color: ;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    margin-bottom: 25px;
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}

.thmbnl-recent {
    padding: 20px 13px 0px 13px;
    width: 190px;
    display: inline-block;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    background-color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;

}

.thmbnl-recent h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    margin: 0 auto;
    padding: 10px 0px;
    letter-spacing: 2px;
}

#recent-title {
    font-family: "calibri light";
    text-align: center;
    width: 950px;
    background-color: white;
    margin: 0 auto;
    padding: 10px 0px;
    position: relative;
    z-index: 2;
    border-top: solid;
    border-right: solid;
    border-left: solid;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    border-width: 1.5px;
    border-color: #d8d8d8;
}

.thmbnl-recent:hover {
    background-color: #e8e8e8;
    transition: background-color 0.3s ease;
}

.thmbnl-recent:active {
    background-color: #d1d1d1;
}


/*--------SLIDE IMAGE---------*/

#gallery-container {
    margin: 75px 0px 45px 0px;
    text-align: center;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;
}

#slide-section {
    text-align: center;
    background-color: white;
    padding: 20px 20px 0px 20px;

}

#gallery-container h1{
    padding: 15px 0 15px 0;
    margin: 0;
    font-family: "calibri light";
    font-size: 30px;
    border-bottom: solid;
    background-color: white;
    border-color: #d8d8d8;
    border-width: 1.5px;
    box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
    z-index: 3;
    position: relative;
}

#imgrow {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;

}
<DOCTYPE! HTML>
<html>

<head>

    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src='script.js' type='text/javascript'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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="webdsn-content">
                <h2 id="webname">WEBSITE DESIGN</h2>
            </div>
        </div>  


  <div id="banner-container">
    <h1>LOREM IPSUM<br>SAMPLE<h1> 
    <h2>Lorem Ipsum Sample Lorem Ipsum Sample</h2>
  </div>

 <div id="thmbnl-container">  

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/workspace-banners_23-2147509206.jpg">
      <h1>Web Design</h1>
    </a> 
  </div>


   <div class="ctgrs-container">
    <a href="posters+flyers.html">
      <img src="https://image.freepik.com/free-psd/blue-company-poster_23-2147493194.jpg">
      <h1>Posters & Flyers</h1>
    </a>  
  </div> 


   <div class="ctgrs-container">
     <a href="#">
      <img src="https://image.freepik.com/free-vector/blue-wave-business-card-design_1017-4370.jpg">
      <h1>Business Cards</h1>
     </a> 
  </div>

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/abstract-logo-template_23-2147490980.jpg">
      <h1>Logo Design</h1>
     </a> 
  </div>

  </div> 

  <h2 id="recent-title">Recent Projects</h2>
  <div id="recent">
    <div id="recent-container">
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
    </div>
  </div>

</body>

相关问题
最新问题