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

时间：2017-07-12 05:01:04

标签： jquery html internet-explorer firefox click

这个小函数将一些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>

3 个答案:

答案 0 :(得分：0)

试试我的例子。我刚刚添加了图标作为默认值，因为我没有时间附加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>

答案 1 :(得分：0)

$(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();
  });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

您似乎没有正确完成标记，this适用于所有浏览器

答案 2 :(得分：-1)

您可以尝试.on click（）事件而不是.click（）。这是一个例子，

$(document).on('click', '.summaryArrowRight', function () 
{
// your function here
});

希望它有效。

相关问题
最新问题