Question

我试图为我的网站制作一个时尚的响应式标题，并使用jQuery slideToggle #navSearchDD在标题内部使用搜索表单。我遇到的问题是，当我点击搜索字段时，再次点击slideToggles #navSearchDD并再次隐藏它。

我制作了一个显示情况的JSFiddle：

https://jsfiddle.net/tksengen/yh8wju2q/1/

＆＃13;

jQuery(function () {

    jQuery("#navMoreButton").click(function () {
        jQuery("#navMoreDD").slideToggle("fast", function () {
            // Animation complete.
        });
    });

    jQuery("#navSearchButton").click(function () {
        jQuery("#navSearchDD").slideToggle("fast", function () {
            // Animation complete.
        });
    });

});

＆＃13;

body { 
    padding: 0;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

.fs-nav-wrap {
	width: 100%;
	height: 50px;
	background-color: #22222c;
}

.fs-nav-border {
	height: 48px;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
    
}

.fs-nav-wrap header {
	height: 100%;
}

.fs-nav-search, .fs-nav {
	width: 20%;
	float: left;
}

.fs-nav-logo {
	width: 60%;
	float: left;
}

.fs-nav-logo {
	height: 100%;
	text-indent: -9999px;
}

.nav-logo {
	font-size: 14px;
	color: #F9F9F9;
	margin: 0;
	padding: 0;
	display: block;
	height: 100%;
}

.nav-logo a {
	height: 100%;
	display: block;
	background-image: url('images/mobile-logo.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 35px;
	
}

.fs-nav-search {
	height: 100%;
}

.fs-nav {
	height: 100%;
	text-align: right;
	
}

.fs-nav ul,
.fs-nav-search ul {
	height: 100%;
}

.fs-nav ul li,
.fs-nav-search ul li {
	display: inline-block;
	font-weight: 300;
	line-height: 48px;
	margin-right: 10px;
	
}

.fs-nav .nav-desk {
	display: none;
}

.fs-nav .nav-more,
.fs-nav-search ul li {
	margin-right: 0;
	padding: 0 20px;
	border-left: 1px solid #22222c;
	border-right: 1px solid #22222c;
}

.fs-nav .nav-more:hover,
.fs-nav-search ul li:hover {
	background-color: #15151c;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	cursor: pointer;
}

.fs-nav .nav-more img,
.fs-nav-search ul li img {
	width: 15px;
}

.fs-nav .nav-more {}

#navSearchDD {
	display: none;
	position: absolute;
	right: 0;
	min-width: 300px;
	width: 100%;
	background-color: #15151c;
	z-index: 5;
	text-align: left;
}


#navSearchDD {
    display: block;
}

#navSearchDD:after {
	content: "";
	height: 1px;
	width: 55px;
	background-color: #15151c;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	position: absolute;
	top: 0;
	left: 0;
}

.navSearchDD-border {
	border: 1px solid #333;
}

#navSearchDD span.screen-reader-text {
	display: none;
}

#navSearchDD input {
	background-color: inherit;
	border: none;
	color: #8c8ca4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fs-nav-wrap group">
    <div class="fs-nav-border group">
        <header>
            <div class="fs-nav-search">
                <ul>
                    <li id="navSearchButton">
                        <img src="http://fsdev.tew.no/wp-content/themes/fifasamfunnetbny/images/nav-search.svg" alt="Søk">
                        <div id="navSearchDD">
                            <div class="navSearchDD-border">
                                <form role="search" method="get" class="search-form" action="">
                                    <label>	<span class="screen-reader-text">Søk etter:</span>

                                        <input type="search" class="search-field" placeholder="Søk …" value="" name="s" title="Søk etter:">
                                    </label>
                                </form>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="fs-nav-logo">
                	<h1 class="nav-logo">
				<a href="/">Test - Hjem</a>
			</h1>

            </div>
            <div class="fs-nav">
                <ul>
                    <li class="nav-desk"><a href="#">Test</a>
                    </li>
                    <li class="nav-desk"><a href="#">Test</a>
                    </li>
                    <li class="nav-desk"><a href="#">Test</a>
                    </li>
                    <li class="nav-desk"><a href="#">Test</a>
                    </li>
                    <li class="nav-more" id="navMoreButton">
                        <img src="http://fsdev.tew.no/wp-content/themes/fifasamfunnetbny/images/nav-more.svg" alt="Mer">
                        
                        </li>
                </ul>
            </div>
        </header>
        <!-- #masthead -->
    </div>
</div>
<!-- .fs-nav-wrap -->

＆＃13;

当我点击搜索表单时，如何保持#navSearchDD可见，或者是否有更好的方法来实现我在这里的目标？

另外，如果由于某种原因slideToggle默认为display: none;，我无法让{{1}}在jsFiddle中工作？

Answer 1

正在发生的事情是search-field位于#navSearchDD内的navSearchButton内。

因此，当您在搜索字段内单击时，也会检测到#navSearchButton内的点击。

您可以做的是检查点击是否发生在搜索字段中，如果没有，则不要切换搜索栏。

    jQuery("#navMoreButton").click(function () {
        jQuery("#navMoreDD").slideToggle("fast", function () {
            // Animation complete.
        });
    });

    jQuery("#navSearchButton").click(function (event) {
        if(event["toElement"]["className"] != 'search-field') {
            jQuery("#navSearchDD").slideToggle("fast", function () {
                // Animation complete.
            });
        }

    });

jsFiddle：https://jsfiddle.net/yh8wju2q/10/

如果这不是您所谈论的孩子，您可以使用此方法寻找特定的孩子，并防止其切换。

Answer 2

我无法解释为什么设置display:none;导致问题是jsfiddle ...但这里有一个小提琴和帮助你的代码。

https://jsfiddle.net/yh8wju2q/13/

这是一个有一些额外功能的小提琴 https://jsfiddle.net/yh8wju2q/14/

HTML（简体）

<div id="header">

<img id="searchButton" src="http://fsdev.tew.no/wp-content/themes/fifasamfunnetbny/images/nav-search.svg" alt="Søk"/>
<img id="menuButton" src="http://fsdev.tew.no/wp-content/themes/fifasamfunnetbny/images/nav-more.svg" alt="Mer"/>

</div>

<div id="search">
<input type="text" value="Search..."/>
</div>

<div id="menu">
<ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
</ul>
</div>

CSS（简体）

body, ul, li { 
    padding: 0;
    margin: 0;
}

#header {
    height:50px;
    background-color:#22222c;
}

#searchButton {
    width: 20px;
    height:20px;
    padding:15px;
    display:block;
    float: left;
    cursor:pointer;
}

#menuButton {
    width: 20px;
    height:20px;
    padding:15px;
    display:block;
    float: right;
    cursor:pointer;
}

#searchButton:hover, #menuButton:hover {
    background-color:#333333;
}

#search, #menu {
    padding:10px;
    background-color:#333333;
}

#search input {
    height:20px;
    padding:5px 0;
    text-indent:10px;
    background-color:#22222c;
    color: #8c8ca4;
    width:100%;
    border:none; outline:none;
}

#menu li {
    color: #8c8ca4;
    list-style:none;
}

JQuery的

jQuery("#searchButton").click(function () {
    jQuery("#search").slideToggle("fast", function () {
        // Animation complete.
    });
});

jQuery("#menuButton").click(function () {
    jQuery("#menu").slideToggle("fast", function () {
        // Animation complete.
    });
});

点击搜索表单时保持孩子切换 - jquery

2 个答案: