我正在将手风琴用于自定义WP主题。如果用户单击,则手风琴的结构允许显示或隐藏特定部分:
代码:
<div class="col-md-3 accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
<!-- Collection card -->
<div class="card collection-card z-depth-1-half">
<!-- Card image -->
<div class="view zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg" class="img-fluid" alt="">
<div class="stripe dark">
<p>Red trousers
<i class="fas fa-angle-right"></i>
</p>
</div>
</div>
</div>
</a>
<!-- Card image -->
</div>
<!-- Collection card -->
</div>
</div>
<!-- Accordion card -->
</div>
部分显示/隐藏:
<div class="col-md-12 accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<a name="collapseOne1"></a>
<!-- Accordion card -->
<div class="card">
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
bla bla bla
</div>
</div>
</div>
<!-- Accordion card -->
</div>
到目前为止没有问题。但是现在我的问题是,想象我有一个像这样的网格:
container
row
col-md-3
如果在桌面上可以完美地看到4个手风琴,但是当导航移动时,它们显然是重叠的。
这给我带来了糟糕的用户体验,因为用户不了解,并且单击下面的第一个手风琴显示了移动中的显示/隐藏,但是他不知道。这就是为什么我想要实现一个简单的锚点<a>
。
<a href="#C4">See also Chapter 4</a>
和
<a name="C4">Chapter 4</a>
但对于我来说,如果我实施了
<a name="collapseOne1"></a>
我只有显示和隐藏但没有锚点,我怎么能同时拥有这两个?
答案 0 :(得分:0)
带有“#”的链接引用了一个ID。
如果您希望您的<a name="collapseOne1"></a>
也被引用为#C4
,请执行以下操作:
<a href="#C4">go to Chapter 4</a>
<a id="C4" name="collapseOne1">Chapter 4</a>
希望这会有所帮助!