javascript - 显示/隐藏 Div 仅由按钮触发

标签 javascript html css

我遇到了这个问题: 我试图让一些部分隐藏在 div 中的表单，由按钮(图像或输入类型按钮)触发。问题是，当 div 展开时，用户必须单击该字段以输入一个值，但是，单击 div 会再次隐藏它 :( 有什么办法可以解决这个问题吗？我想隐藏/显示应该限制为只点击按钮，但此刻它在div的任何地方触发。我如何限制它？ 这是我到目前为止所做的: http://jsfiddle.net/yczpex3z/ 

 $(document).ready(function(){
      $('.text_container').addClass("hidden");

      $('.text_container').click(function() {
        var $this = $(this);
        if ($this.hasClass("hidden")) {
          $(this).removeClass("hidden").addClass("visible");
        } else {
          $(this).removeClass("visible").addClass("hidden");
        }
      });
    });
body {
    background-image: url("bg1.png");
    text-align:center;
}
.content ul, .content li {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.wrap {
	text-align:center;
}
.hidden>div {
    display:none;
}
.visible>div {
    display:block;
}
.text_container {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
	padding-left:5px;
}
.header-cont {
	z-index:2;
    width:100%;
}
.header {
    height:160px;
    background:#ffffff;
    border:1px solid #000000;
    border-bottom: none;
    width:940px;
    margin:0px auto;
    text-align:left;
}
.logo {
	margin:0px auto;
	height:120px;
	width:940px;
}
.menu {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.menu-table {
	display:table;
}
.menu-table-row {
	display:table-row;
}
.menu-table-cell, .menu-table-cell a, .menu-table-cell a:link, .menu-table-cell a:visited, .menu-table-cell a:active {
	display:table-cell;
	float:left;/*fix for  buggy browsers*/
	width:156px;
    text-align:center;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.menu-table-cell a:hover {
	display:table-cell;
	float:left;/*fix for  buggy browsers*/
	width:156px;
    text-align:center;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: red;
	text-decoration: none;
}
.content-cont {
	width:100%;
	text-align:center;
}
.content {
	background:#ffffff;
	border:1px solid #000000;
	border-top: none;
	width:940px;
	margin:0px auto;
	text-align:left;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.items {
	width=100%;
	display:table;
}
.items-row {
	display:table-row;
}
.items-cell {
    display:table-cell;
    width:313px;
    text-align:center;
    padding:10px 5px 15px 5px;
}
.item-single-table {
	width=100%;
	display:table;
	text-align:center;
}
.item-single-row {
	display:table-row;
}
.item-single-cell {
    display:table-cell;
    width:313px;
    background:white;
    text-align:center;
    padding:5px 0px 3px 0px;
}
.menuitems-table {
	display:table;
}
.menuitems-table-row {
	display:table-row;
}
.menuitems-table-cell {
	display:table-cell;
	width:313px;
	text-align:left;
	padding-left:5px;
	padding-bottom:5px;
}
.footer {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: normal;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.orderbutton {
	z-index:1;
	position: fixed; 
	right: 10px;
	bottom: 10px; 
	width: 240px; 
	height: 57px; 
}
.auto-style1 {
	text-align: center;
}
    a.fancybox img {
        border: none;
        box-shadow: 0 1px 7px rgba(0,0,0,0.6);
        -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
    } 
    a.fancybox:hover img {
        position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
    }
.auto-style2 {
	border: 1px solid #000000;
}
.auto-style3 {
	border-width: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="ordermenu">
<form name="contactform" method="post" action="send_form_email.php">
<div class="text_container"><input type='button' class="hideshow aperitivos" value='APERITIVOS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM1</div>
<div class="menuitems-table-cell"><input  type="text" placeholder="0" name="gruckasalata" class="input gruckasalata" maxlength="5" size="5" /></div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="text_container"><input type='button' class="hideshow entradas" value='ENTRADAS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM2</div>
<div class="menuitems-table-cell">FIELD</div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="text_container"><input type='button' class="hideshow comidas" value='COMIDAS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM3</div>
<div class="menuitems-table-cell"><input  type="text" placeholder="0" name="musaka" class="input musaka" maxlength="5" size="5" />
</div>
<div class="menuitems-table-cell">PHOTO</div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM4</div>
<div class="menuitems-table-cell"><input  type="text" placeholder="0" name="pulnenichushki" class="input pulnenichushki" maxlength="5" size="5">
</div>
<div class="menuitems-table-cell">PHOTO</div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM5</div>
<div class="menuitems-table-cell"><input  type="text" placeholder="0" name="svinskosuszele" class="input svinskosuszele" maxlength="5" size="5" />
</div>
<div class="menuitems-table-cell">PHOTO</div>
</div>
</div></div>
</div>
<div class="text_container"><input type='button' class="hideshow sobremesas" value='SOBREMESAS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM6</div>
<div class="menuitems-table-cell">FIELD</div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="text_container"><input type='button' class="hideshow bebidas" value='BEBIDAS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM7</div>
<div class="menuitems-table-cell">FIELD</div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="text_container"><input type='button' class="hideshow pao" value='PAO' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM8</div>
<div class="menuitems-table-cell">FIELD</div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="orderbutton" style=""><input type="text" disabled="disabled" id="totalprice" name="totalprice" /></div>
<div class="contact-form"><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">NAME *</div>
<div class="menuitems-table-cell"><input  type="text" name="name" maxlength="50" size="30" /></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Email Address *</div>
<div class="menuitems-table-cell"><input  type="text" name="email" maxlength="80" size="30" /></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Telephone Number *</div>
<div class="menuitems-table-cell"><input  type="text" name="telephone" maxlength="30" size="30" /></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Address *</div>
<div class="menuitems-table-cell"><textarea  name="address" maxlength="1000" cols="45" rows="6"></textarea></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Postal Code *</div>
<div class="menuitems-table-cell"><input  type="text" name="postalcode" maxlength="30" size="30" /></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Comments</div>
<div class="menuitems-table-cell"><textarea  name="comments" maxlength="1000" cols="45" rows="6"></textarea></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell"></div>
<div class="menuitems-table-cell"><input type="submit" value="Submit" /></div>
<div class="menuitems-table-cell"></div>
</div>
</div></div>
</form>
</div>

最佳答案

查看此 jsfiddle .

我向按钮添加了一个点击事件，然后它显示/隐藏它的父“.text-container”。

JS

 $(document).ready(function(){
      $('.text_container').addClass("hidden");

      $('.hideshow').click(function() {
        var $parentContainer = $(this).parents('.text_container');
        if ($parentContainer.hasClass("hidden")) {
             $parentContainer.removeClass("hidden").addClass("visible");
        } else {
          $parentContainer.removeClass("visible").addClass("hidden");
        }
      });
    });

关于javascript - 显示/隐藏 Div 仅由按钮触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28044687/

上一篇：html - :focus on class doesn't work

下一篇：jquery - 如何修复 jquery 数据表单元格宽度？

相关文章：

javascript - 将内容添加到其他页面的按钮

html - 如何确保跨度始终出现在可能调整大小的 div 内的文本区域的右侧？

php - 一个 div 在 HTML/PHP 更改后不响应 CSS

html - 向左推内容以显示删除按钮

javascript - 纯 JS 的上下文菜单

css - 将CSS文件放在Grails应用程序中的哪里？

javascript - 从并发事件重新渲染后，react-router 停止路由

javascript - 在 Javascript 中添加自定义对话框？

php - 如何在PHP中使用JS创建的数据？

javascript - Codeigniter 笑脸未出现在预览区域中

©2024 IT工具网  联系我们