Question

＆＃13;

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}


.ds-drop-down {
    background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent;
    padding: 10px 5px;
    height: 0px;
    width: 8px;
    position: absolute;
    top: 63px;
    border: 1px solid blue;
}

div#span-advanced-search {
    border: 1px solid grey;
    display: none;
    left: 20px;
    width: 600px;
    padding: 10px;
}

div#span-advanced-search label{
    width: 100px;
}

input[type=checkbox]:checked ~ div#span-advanced-search {
    background: white;
    display: block;
    position: relative;
    width: 564px;
    padding: 10px;
    visibility: visible;
    left: -573px;
    top: 11px;
}

＆＃13;

<input class="ds-text-field " type="text">
		<xsl:attribute name="name">
		      <xsl:value-of
		          select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='search'][@qualifier='queryField']"/>
		</xsl:attribute>
</input>

<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/>
<input type="checkbox" id="toggle-1">
			

<div id="span-advanced-search">
	<label>Education Level:</label> <input id="text_edulvl" type="text"/><br></br>
	<label>Type of Learning Material:</label> <input id="text_lm" type="text"/><br></br>
	<label>Difficulty Level:</label> <input id="text_difflvl" type="text"/><br></br>
	<label>Author:</label> <input id="text_author" type="text"/><br></br>
</div>

＆＃13;

这是我的代码段。当我点击复选框＆＃34; toggle-1＆＃34;时，div＆＃34; span-advanced-search＆＃34;会打开，没错。但在打开div后，当我点击div内的任何地方时，它会被关闭。因此，我无法对这些输入提供任何输入（即教育程度，作者等）。我希望只有在取消选中复选框时才会关闭div。

Answer 1

试试这个Jquery：

$('#toggle-1').click(function(){
  var a = $(this).is(":checked");
  if(a){
        $('#span-advanced-search').css("display","block")
        }
  else{
        $('#span-advanced-search').css("display","none")
      }
});

Answer 2

解决方案必须像我想的那样。我希望您正在寻找：http://jsfiddle.net/vhoeamcq/

＆＃13;

function srchMoreActive(t){
    if(t){
        document.getElementById('srchMoreOpt').classList.remove('hid');
        document.getElementById('srchMore').classList.add('hid');
    }else{
        document.getElementById('srchMoreOpt').classList.add('hid');
        document.getElementById('srchMore').classList.remove('hid');
    }
}
function form1Sub(){
    
}
function srch(){
    
}

＆＃13;

#form1 #s00{padding: 5px 25px 5px 5px; width:300px; border:1px solid rgba(0,0,0,0.2);}
#form1 #srchMore{margin-left:-27px; cursor:pointer; color:#ccc;}
#form1 #srchMore:hover{color:#0ac;}
#form1 .srchMoreAct{color:#333;}
#form1 #srchMoreOpt{width:320px; height:350px; padding:5px; box-shadow:0 2px 4px rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.2);}
#form1 .hid{display:none;}
#form1 #srchMoreOpt .exi{float:right; padding:5px 10px 5px 10px; font-family:'Arial'; cursor:pointer; background:#ccc; color:#666;}
#form1 #srchMoreOpt .exi:hover{background:#0ac; color:#fff;}

＆＃13;

<form id="form1" action="" method="post" onSubmit="form1Sub()">
    <input id="s00" name="s" type="text" value="" placeholder="Type to serach" onChange="srch()" />
    <span id="srchMore" onClick="srchMoreActive(true)">&#9660;</span>
    <div id="srchMoreOpt" class="hid">
        <span class="exi" onClick="srchMoreActive(false)">x</span>
        <p>Form Details</p>
        <p><input type="text" /></p>
    </div>
</form>

＆＃13;

点击框中的任意位置，关闭

2 个答案: