Question

从以下代码中，单击灰色栏时内容会折叠，如果再次单击则会展开。灰色条上还有一个搜索输入字段，但单击它时内容会折叠。

我想要的是禁用输入字段中的切换功能，但保留其余部分。这意味着当我点击灰色条的其他部分时，除了搜索输入之外，切换仍然有效。这是一种方法吗？希望你们中的一些人可以给我一些建议。谢谢！

$(".aq_epdtitle").click(function() {
  $('.aq_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.aq_expandct {
  padding: 5px;
  background-color: #aadfff;
}

.aq_epdtitle {
  background: #ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
  background-position: right 0px;
  cursor: pointer;
  padding: 0 10px;
  margin: 0;
  overflow: hidden;
}

.collapsed .aq_epdtitle {
  background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle">
      <div class="floatleft bold"><span>Pending Submission</span></div>
      <div class="floatright"><input class="searchapp" name="searchapp" type="text" value="" placeholder="Search application no." alt="Search application no." /></div>
      <div class="clear"></div>
    </div>
    <div class="aq_expandct">
      <p>content</p>
    </div>
  </li>
</ul>

Answer 1

您可以使用event.stopPropagation()执行此操作。

我为输入添加了另一个点击功能，并添加了e.stopPropagation()。这会阻止事件冒泡。

$(".aq_epdtitle").click(function() {
  $('.aq_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".searchapp").click(function(e){
e.stopPropagation();
});

ul { list-style-type: none; margin:0; padding: 0; } 

.aq_expandct{
	padding : 5px;
  background-color: #aadfff;
}
	
.aq_epdtitle{
	background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
	background-position:right 0px;
	cursor:pointer;
	padding: 0 10px;
  margin: 0;
  overflow:hidden;
}
	
.collapsed .aq_epdtitle{
	background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

.floatleft{float:left;}
.floatright{float:right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle">
      <div class="floatleft bold"><span>Pending Submission</span></div>
      <div class="floatright"><input class="searchapp" name="searchapp" type="text" value="" placeholder="Search application no." alt="Search application no."/></div>
      <div class="clear"></div>
    </div>
    <div class="aq_expandct">
      <p>content</p>
    </div>
  </li>
</ul>

禁用特定字段上的切换功能

1 个答案: