Question

所以我最近整理了一个带有隐藏内容的下拉窗口，一旦点击，它将显示其背后的内容，然后向该网址的锚点添加一个哈希值，以便链接被复制并发送给其他人。链接打开后，它将自动打开所选的下拉列表。

这是我的代码......

HTML

<div class="dropdown_wrapper">
   <a href="#!window1" id="window1" class="dropdown">Title 1</a>
   <div class="hidden dropdown_content">
      <p>Hidden Content for window 1</p>
   </div>
</div>
<div class="dropdown_wrapper">
   <a href="#!window2" id="window2" class="dropdown">Title 2</a>
   <div class="hidden dropdown_content">
      <p>Hidden Content for window 2</p>
   </div>
</div>

如果jQuery包含特定哈希

，则打开下拉列表

$(document).ready(function() {
    var urlHash = window.location.hash.replace('#!', '');
    if (window.location.hash.indexOf('!') == 1 && $('.dropdown_wrapper').length > 0) {
        $('#' + urlHash).next('.dropdown_content').slideDown(300);
    }
});

jQuery用于打开下拉列表的实际onclick功能

$('.dropdown').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active');
        $(this).next('.dropdown_content').slideUp(300);
    }else{
        $(this).addClass('active');
        $(this).next('.dropdown_content').slideDown(300);
    }
});

我的问题是，当有人直接打开下拉列表的网址时，我如何获得将我的按钮从加号更改为减号的活动类，就像它被点击一样？

Answer 1

活动时将图像交换添加到Css

.active {
      background-image:url("ulrto Plus Image Here") !important
 }

并在所有其他Select项目上将css更改为

.DropDownMenuItem {
  background-image:url("ulr to Minus Image Here") 
}

Answer 2

您已经实施了图标交换吗？那不是那么简单吗？

 $('#' + urlHash).addClass('active')

$（文件）.ready（）{}

中的

P.S。：我不确定我是否完全理解了你的问题。所以请告诉我你是否有不同的意思。

现在可以看到内容时如何将类添加到下拉窗口？

2 个答案: