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

时间：2015-01-20 11:52:08

标签： javascript html css

我有这个问题： 我试图获得一个表单，其中一些部分隐藏在div中，由按钮（图像或输入类型按钮）触发。问题是，当div扩展时，用户必须单击该字段才能输入值，但是，单击div会再次隐藏它:(任何想法我如何解决这个问题？我想隐藏/显示应限制为单击按钮，但此时它会在div上的任何位置触发。如何限制它？ 这是我到目前为止所做的事情： http://jsfiddle.net/yczpex3z/

＆＃13;
＆＃13; 
 $(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");
        }
      });
    });
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

尝试将点击事件添加到按钮而不是表单。

编辑：raduB打败了我，但我也会发布我的解决方案。

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

      $('.text_container > input[type="button"]').click(function() {
        var $this = $(this.parentElement);
        if ($this.hasClass("hidden")) {
          $this.removeClass("hidden").addClass("visible");
        } else {
          $this.removeClass("visible").addClass("hidden");
        }
      });
    });

答案 1 :(得分：0)

问题是你将click事件放在容器上，试试这个：

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

      $('input[type="button"]').click(function() {
        var $this = $(this);
        if ($this.parent().hasClass("hidden")) {
          $this.parent().removeClass("hidden").addClass("visible");
        } else {
          $this.parent().removeClass("visible").addClass("hidden");
        }
      });
    });

将click事件放在按钮上并将其定位为父级以添加隐藏/可见

类

小提琴：http://jsfiddle.net/yma6m0w8/

答案 2 :(得分：0)

请参阅此jsfiddle。

我在按钮上添加了一个点击事件，然后显示/隐藏了它的父级＆＃34; .text-container＆＃34;。

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");
        }
      });
    });

答案 3 :(得分：-1)

我将按钮的ID添加为“btn”

（文档）$。就绪（函数（）{       $（ 'TEXT_CONTAINER'）addClass（ “隐藏”）; 

$('#btn1').click(function() {

    var $res = $(this).closest("div");
    if ($res.hasClass("hidden")) {
      $($res).removeClass("hidden").addClass("visible");
    } else {
      $($res).removeClass("visible").addClass("hidden");
    }
  });
});

请检查fiddler here

中的代码

希望我的解决方案能帮到你.. :)。

相关问题
最新问题