使用锚点单击打开折叠的容器

Posted 2023-03-24

【中文标题】使用锚点单击打开折叠的容器

【英文标题】：Open collapsed container with anchor click

【发布时间】：2021-09-25 06:21:24

【问题描述】：

我的问题是，我的关闭标签无法通过锚点点击打开。锚点本身位于另一个包含在内的 html 文件中。单击折叠的 a-tag 可以正常工作并打开选项卡，但单击锚点不起作用。

折叠部分如下所示：

<div id="details">
  <div class="mobile-collapse-wrapper">
     <div class="mobile-collapse-content-wrapper">

        <div id="mobile-productdetails" class="collapse fade">
           <div class="product-description">
              <div>Description</div>
           </div>
           <div class="row">
              <div class="productview-detail-tab-wrapper">
                 <div class="productview-detail-tab">product details</div>
              </div>

              <div class="col-xs-12 col-sm-8 col-md-8">
                    <div class="short-description">
                       <div>Short description</div>
                    </div>
              </div>
           </div>
        </div>
     </div>

     <div class="mobile-collapse-btn-wrapper" id="mobile-productdetails-jump">

        <div class="mobile-collapse-btn" data-toggle="collapse" data-target="#mobile-productdetails">
            <a data-toggle="collapse" data-target="#mobile-productdetails" data-parent="#details" href="#mobile-productdetails" onclick="return false;">
               <div class="mobile-collapse-collapsed-header">
                  Details
               </div>
               <div class="mobile-collapse-btn-icon">
               </div>
            </a>
        </div>
     </div>
  </div>

我的锚文件是

<a class="jump-details-link mobile-jump" id="testCollapse" href="#details">
<script type="text/javascript">
$('#testCollapse').click(function(e)    
    console.log("Function Show Collapse");
    $('#mobile-productdetails').collapse('show');        
);
</script>

我的控制台日志也没有返回。它什么也不做。甚至可以打开另一个 html 文件的容器吗？正如我已经说过的，它实际上是包括在内的。

【参考方案1】：

如果您的#testCollapse 是动态加载的，请尝试此操作，否则您可能必须将点击委托给页面加载时存在的层次结构中较高的元素。

$( "#testCollapse" ).on( "click", function() 
  console.log("Function Show Collapse");
  $('#mobile-productdetails').collapse('show');
);