Question

当我点击我创建的下拉内容区域时，有人可以举例说明如何使用window.location.hash添加到网址末尾？这是我到目前为止的代码......

jQuery的：

$('.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);
    }
});

HTML：

<div class="dropdown_wrapper">
   <h3 class="dropdown">Title of Dropdown<span></span></h3>
   <div class="hidden dropdown_content">
      <p>Content</p>
   </div>
</div>

我想要的是当下拉内容窗口打开以将某些内容添加到网址时，这样当您复制链接并将其发送给某人时，它就已经打开了特定的下拉列表。

这是我第一次使用这个，所以如果可以的话，越多越好！如果您需要我提供更多详细信息，我会提供给他们！

谢谢！

Answer 1

添加ID

MY_VAR=my

我们可以链接到它：

<div id="dropdown" class="dropdown_wrapper">
   <h3 class="dropdown">Title of Dropdown<span></span></h3>
   <div class="hidden dropdown_content">
      <p>Content</p>
   </div>
</div>

我们可以通过以下网址找到它：

<a href="#dropdowm" id="link">Goto Drop down</a>

因此，在任何锚标记或网址中，您都可以使用“#idOfElement”。

来源：

page jump from div to an anchor

http://www.w3schools.com/jsref/prop_loc_hash.asp

URL hash format, what's allowed and what's not?

Answer 2

您可能希望为您的下拉菜单提供唯一ID。这样可以让您更轻松地找到它们。它们还会使浏览器在粘贴到URL时将该下拉列表滚动到视图中，但您仍需要自己打开下拉列表。

$('.dropdown').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active');
        $(this).next('.dropdown_content').slideUp(300);
        history.replaceState(null, null, "#");
    }else{
        $(this).addClass('active');
        $(this).next('.dropdown_content').slideDown(300);
        history.replaceState(null, null, "#" + escape($(this).text()))
        // If the dropdown had an ID:
        //    history.replaceState(null, null, "#" + $(this).prop('id'))
    }
});

$(document).on("load", function(){
   var preselect = location.hash.replace(/#/, ''),
       $dd = [];

   if (preselect.length > 0) {
      $dd = $(".dropdown").filter( dd => $(dd).text() == unescape(preselect) );
      // If the dropdown had an ID:
      //    $dd = $("#" + preselect)
      $dd.addClass('active');
      $dd.next('.dropdown_content').slideDown(300);
   }
});

如何让window.location.hash工作以添加到url？

2 个答案: