Question

我有这种我无法理解的奇怪场景。

基本上，我使用jquery show();显示一个元素，它可以正常工作。

但是我需要使用hide()函数hide();相同的元素，但元素保持可见，而hide（）不起作用。

有人可以就此提出建议吗？

这是一个有效的FIDDLE。

这是我的代码：

$(document).on('click','.buildExMain', function(e){
$(this).children('.buildExDrop').show();
});


$(document).on('click','.pSelection', function(e){

$('.buildExDrop').hide();
});

Answer 1

@billyonecan在我的e.stopPropagation();修复此问题后添加了$('.buildExDrop').hide();。

这允许子元素.pSelection的隐藏点击事件不会冒泡到.buildExDrop元素的show click事件。

Answer 2

您点击隐藏也会触发要显示的点击。这工作

           <h:form id="rqScannerForm">
              <p:growl id="QRgrowl" showDetail="true" /> 
              <p:selectOneMenu  id="selectOneMenu" style="margin-top: 30px; margin-left: 20px; height: 30px;" styleClass="MyOneMenu" scrollHeight="150" 
                 value="#{viewEventStatusController.eventStatusId}"  disabled="#{!eventStatusController.isEntityEditable}" autoWidth="false" >
                 <f:selectItem itemLabel="Barcodeleser im Lager 1" itemValue="0" />
                 <f:selectItems value="#{viewEventStatusController.eventStatusList}" var="eventStatus" itemValue="#{eventStatus.id}" itemLabel="#{eventStatus.objectId}" />
                 <p:ajax event="change" update="@(*[id*=chatEntriesDataPanel], idleMonitor, growl)" resetValues="true"  listener="#{viewEventStatusController.changeSelectOnMenue()}" />
              </p:selectOneMenu>
              <br/>

              <!-- Web Cam Scanner -->
              <p:photoCam widgetVar="photoCamWidgetVar" listener="#{viewEventStatusController.oncapture}"  width="360" height="306" style="margin-top: 30px; margin-left: 20px;" 
                 update="@(*[id*=qrInputText], idleMonitor, growl), @(*[id*=QRgrowl], idleMonitor, growl)" >
                 <p:poll widgetVar="photoCamPoll" onstart="PF('photoCamWidgetVar').capture()"  interval="2" autoStart="false" stop="#{viewEventStatusController.pollStop}"/>
              </p:photoCam>
              <br/> 
              <p:inputText id="qrInputText" value="#{viewEventStatusController.qrCode}" style="width: 67%; height: 25px; margin-top: 30px; margin-left: 20px;"/>
              <p:commandButton action="#{viewEventStatusController.callServiceAgent(null, -1)}"  update="@(*[id*=chatEntriesDataPanel], idleMonitor, growl)"    process="@form" icon="ui-icon-arrowthick-1-e"  style="margin-top: 30px; margin-left: 20px; width:12%; height: 35px;" styleClass="ui-btn-inline ui-btn-right" >
              </p:commandButton>
           </h:form>

jQuery：隐藏元素后显示？

2 个答案: