jQuery 单击事件适用于 Chrome，而不适用于 Firefox 或 IE

debugcn 发表于 Dev

A. 赫斯顿

这个小功能在页面加载时将一些 div 设置为隐藏，然后在单击箭头图标时显示或隐藏它们。

这在 Chrome 中运行良好，但在 FF 和 IE 中，页面加载时一切都可见，单击图标什么也不做。

我是 jQuery 的新手，已经阅读了一些其他问题，但看不到解决方案。

$(document).ready(function() {
  $(".each-panel").hide();
  $(".additional_comments").hide();
  $(".summaryArrowUp").hide();

  $(".summaryArrowRight").click(function(){
    $(".each-panel").slideDown("slow");
    $(".additional_comments").slideDown("slow");
    $(".summaryArrowRight").hide();
    $(".summaryArrowUp").show();
  });

  $(".summaryArrowUp").click(function(){
    $(".each-panel").slideUp("slow");
    $(".additional_comments").slideUp("slow");
    $(".summaryArrowRight").show();
    $(".summaryArrowUp").hide();
  });

这是 HTML：

<div id="capSummaryContainer" class="infoBoxLine">
  <h3 class="buildSummary">Build Summary 
    <span><i class="fa fa-chevron-right summaryArrowRight" aria-hidden="true"></i>
      <i class="fa fa-chevron-up summaryArrowUp" aria-hidden="true"></i>
    </span>
  </h3>
  <div class="each-panel hidden">
    <div class="insider" id="capSummaryContainer_custom"></div>
  </div>
  <!-- Front panel contents -->
  <div class="each-panel">
    <h4 class="heading">Front Panel 
      <span>
        <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(2);"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(2, 'Are you sure you want to remove all customization from the front of the cap?');"></i>
      </span>
    </h4>
    <div class="insider" id="capSummaryContainer_front">
      <div class="designname"></div>
    </div>
  </div>
  <!-- Left panel contents -->
  <div class="each-panel">
    <h4 class="heading">Left Panel
      <span>
        <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(3);"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(3, 'Are you sure you want to remove all customization from the left side of the cap?');"></i>
      </span>
    </h4>
    <div class="insider" id="capSummaryContainer_left">
      <div class="designname"></div>
    </div>
  </div>

冰酒

试试我的例子。我只是将图标添加为默认值，因为我没有时间附加 fontawesome。使用 FF 和 IE 以及 Chrome 进行测试。正确格式化后，我发现一些丢失的括号可能在您的主代码中，也可能不在。如果此示例有效，请在 FF 和 IE 中自行测试。

$(".each-panel").hide();
$(".additional_comments").hide();
$(".summaryArrowUp").hide();

$(".summaryArrowRight").click(function() {
  $(".each-panel").slideDown("slow");
  $(".additional_comments").slideDown("slow");
  $(".summaryArrowRight").hide();
  $(".summaryArrowUp").show();
});

$(".summaryArrowUp").click(function() {
  $(".each-panel").slideUp("slow");
  $(".additional_comments").slideUp("slow");
  $(".summaryArrowRight").show();
  $(".summaryArrowUp").hide();
});

i {
  color: blue;
  font-weight: bold;
  padding: 3px;
  background: #CCC;
}

i:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="capSummaryContainer" class="infoBoxLine">
  <h3 class="buildSummary">Build Summary
    <span>
      <i class="fa fa-chevron-right summaryArrowRight" aria-hidden="true">[>]</i>
      <i class="fa fa-chevron-up summaryArrowUp" aria-hidden="true">[^]</i>
    </span>
  </h3>
  
  <div class="each-panel hidden">
    <div class="insider" id="capSummaryContainer_custom"></div>
  </div>
  
  <!-- Front panel contents -->
  <div class="each-panel">
    <h4 class="heading">
      Front Panel
      <span>
        <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(2)"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(2, 'Are you sure you want to remove all customization from the front of the cap?');"></i>
      </span>
    </h4>
    <div class="insider" id="capSummaryContainer_front">
      <div class="designname"></div>
    </div>
  </div>
  
  <!-- Left panel contents -->
  <div class="each-panel">
    <h4 class="heading">
      Left Panel
      <span>
        <i class="fa fa-eye" aria-hidden="true" onclick="selectTab(3);"></i>
        <i class="fa fa-trash" aria-hidden="true" onclick="skiptomylootDelete(3, 'Are you sure you want to remove all customization from the left side of the cap?');"></i>
      </span>
    </h4>
    <div class="insider" id="capSummaryContainer_left">
      <div class="designname"></div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。