jquery - 我怎样才能让这个 .slideToggle 方法起作用？

标签 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();
    });

});

最佳答案

这可能就是我认为您要通过适当移动下拉菜单来寻找的内容。

离开JB Lovo's回答。

$(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;

}
<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>

关于jquery - 我怎样才能让这个 .slideToggle 方法起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44837321/

上一篇：html - 密码在输入中不可见(在 chrome 中工作正常)在 firefox 中不可见

下一篇：css - -ms-appearance、-0-appearance 和外观在编辑器中显示为错误。

相关文章：

javascript - 为什么格式化输入字段会阻止 onChange 事件发生

jquery - 用 JQuery 替换页面中的所有 url？

javascript - 如何判断是否在 javascript 中单击了列表的元素？

javascript - jQuery动画只能在CSS3中解决

javascript - 从单选按钮中选择特定日期时启用禁用设置单选按钮

jquery - 尝试拉取 json img 时未定义

javascript - 当 div 使用 AngularJS 滚动出 View 时在导航栏中显示 Logo

html - 现在按名称定义颜色安全吗？

css - 首先将文本小写，然后将其大写。 CSS有可能吗？

html - 没有宽度的中心 float 容器

©2024 IT工具网  联系我们