Jquery 从项目列表中下拉列表_Jquery_Css_Html_Drop Down Menu

Jquery 从项目列表中下拉列表

jquery css html drop-down-menu

Jquery 从项目列表中下拉列表,jquery,css,html,drop-down-menu,Jquery,Css,Html,Drop Down Menu,我正在使用一个多切换下拉菜单，功能似乎运行正常，但有一个轻微的样式问题，这很麻烦…我在删除下拉图像之间的一个小的白色间隙时遇到问题，该间隙将切换到列表项。我想删除下拉菜单项和切换图像下面的图像之间的白色小填充…希望这有意义…下面是html、css和js 提前感谢您的帮助 <!DOCTYPE HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8">

我正在使用一个多切换下拉菜单，功能似乎运行正常，但有一个轻微的样式问题，这很麻烦…我在删除下拉图像之间的一个小的白色间隙时遇到问题，该间隙将切换到列表项。我想删除下拉菜单项和切换图像下面的图像之间的白色小填充…希望这有意义…下面是html、css和js

提前感谢您的帮助

<!DOCTYPE HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>Dan Meier/ Designer</title>
    <meta name="description" content="Portfolio of Dan Meier">
    <meta name="keywords" content="Freelance, Design, Illustration, Graphics, Website Design, UI, User Interface, Digital Design">
    <meta name="author" content="Dan Meier">

    <!-- Stylesheets -->
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
<style>
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;

}

.dropdown a {
  text-decoration: none;

}

.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;

}

.dropdown [data-toggle="dropdown"]:hover {
  background: #ffffff;
}

<!-- All Projects -->
        <div id="projects_container_new">
        <div id="all_projects">
            <div class="col1">

            <ul>
                    <li class="dropdown">
                    <a href="#" data-toggle="dropdown"><img class="thumb_image" src="images/UX-UI-Dev_cover.jpg"><i class="icon-arrow"></i></a>

                 <ul class="dropdown-menu">
                    <div class="thumb" data-url="project_thesis.html" data-num="0">
                    <div class="thumb_title"><span class="thumb_client">Published Thesis Work</span><br />Algorithm & Parametric Design</div>
                    <div class="thumb_hover"><div class="view_project">See<br />Work</div></div>
                    <img class="thumb_image" src="images/thesis_cover.jpg">
                </div>
                <div class="thumb" data-url="project_conceptualthinking.html" data-num="3">
                    <div class="thumb_title"><span class="thumb_client">Conceptual Thinking</span><br />Visual Design</div>
                    <div class="thumb_hover"><div class="view_project">See<br />Work</div></div>
                    <img class="thumb_image" src="images/design_cover.jpg">
                </div>
                </ul>
                </li>
                <div class="thumb" data-url="project_thesis.html" data-num="0">
                    <div class="thumb_title"><span class="thumb_client">Published Thesis Work</span><br />Algorithm & Parametric Design</div>
                    <div class="thumb_hover"><div class="view_project">See<br />Work</div></div>
                    <img class="thumb_image" src="images/thesis_cover.jpg">
                </div>
             </ul>

<!-- scripts -->
<script>// Dropdown Menu
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
    var button = el.querySelector('a[data-toggle="dropdown"]'),
            menu = el.querySelector('.dropdown-menu'),
            arrow = button.querySelector('i.icon-arrow');

    button.onclick = function(event) {
        if(!menu.hasClass('show')) {
            menu.classList.add('show');
            menu.classList.remove('hide');
            arrow.classList.add('open');
            arrow.classList.remove('close');
            event.preventDefault();
        }
        else {
            menu.classList.remove('show');
            menu.classList.add('hide');
            arrow.classList.remove('open');
            arrow.classList.add('close');
            event.preventDefault();
        }
    };
})

Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};//@ sourceURL=pen.js
</script>
<script src="/assets/common/localstorage.js"></script><script src="/assets/post/scroll/remember_scroll.js"></script><script>RememberScroll.init();</script>

</body>
</html>

什么是style.css？创建一个提琴。我试着从你的例子中创建一个小提琴，并看到结果。对不起，我刚刚添加了其他相关样式的CSS，谢谢。

html, body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: "adelle-sans", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    font-size: 13px;
    line-height: 22px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

#projects_container_new {
    width: 100%;
    height: auto;
    position: absolute;
    top: 95%;
    margin: 0 auto 0 auto;
}

#all_projects {
    z-index: 999;
    max-width: 1200px;
    margin: -2% auto 0 auto;
    padding: 0 40px 120px 40px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

#all_projects .col1 {
    z-index: 999;
    float: left;
    width: 90%;
    height:auto;
    background-color: ;
    position: relative;
    display: block;
}

#all_projects .col2 {
    z-index: 999;
    float: left;
    width: 90%;
    background-color: #ffffff;
    position: relative;
    display: block;
}

#all_projects .col3 {
    z-index: 999;
    float: left;
        width: 90%;
    background-color: #ffffff;
    position: relative;
    display: block;
}

#all_projects .col1b {
    z-index: 999;
    float: left;
        width: 90%;
    background-color: #ffffff;
    position: relative;
    display: none;
}

#all_projects .col2b {
        display: none;
        z-index: 999;
    float: left;
     width: 50%;
    background-color: #ffffff;
    position: relative;
    display: none;
}

#all_projects .col1c {
    z-index: 999;
    float: left;
        width: 90%;
    background-color: #ffffff;
    position: relative;
    display: none;
}

#all_projects .thumb {
    position: relative;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-style: normal;
    color: #ffffff;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
}

#all_projects .thumb .thumb_title {
    z-index: 999;
    position: absolute;
    margin: 0 0 6% 5%;
    bottom: 0;
    left: 0;
    padding: 0;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
    color:#ffffff;
}

#all_projects .thumb .thumb_client {
    z-index: 999;
    font-size: 12px;
    cursor: pointer;
}

#all_projects .thumb .thumb_image {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}

#all_projects .thumb .thumb_hover {
    z-index: 998;
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    overflow: hidden;
    display: block;
    background-image: url("../images/hoverdark.png");
    opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    -ms-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    cursor: pointer;
}

#all_projects .thumb .view_project {
    z-index: 999;
    position: absolute;
    width: 120px;
    height: 60px;
    top: 70%;
    left: 50%;
    margin: -30px 0 0 -60px;
    display: block;
    text-align: center;
    font-family: "adelle-sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 17px;
    text-transform: uppercase;
    color: #000000;
    background-image: url("../images/hover-icon.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    opacity: 0;
    filter:alpha(opacity=0);
}