jquery - 使用 <option> 滚动到 anchor ，然后打开部分

Question

我正在尝试编写 <select> 的代码下拉菜单，以便当某些 <option>单击后，页面将使用常规 anchor /ID 向下滚动到选项部分。我假设我可以通过调用 onchange 函数来做到这一点，就像这样:

<select class="jump-select" onchange="scrollTo();">
     <option selected="selected">Jump to Section</option>
     <option value="#general-info">General Information</option>
     <option value="#venue-info">Venue Information</option>
     <option value="#deal-info">Deal Information</option>
     <option value="#doc-mgmnt">Document Management</option>
     <option value="#buyer-info">Buyer Information</option>
     <option value="#billing-info">Billing and Additional Information</option>
     <option value="#expenses">Expenses</option>
</select>

但最重要的是，这些部分当前正在使用一些 jQuery，它们在加载时隐藏它们，然后在 <h2> 时显示它们。单击该部分的。 (实际上我也在这个论坛上得到了一些帮助。)

这是隐藏/显示部分的代码。理想情况下，我也需要将其集成到 <option> 的使用中锚定功能。例如，某人选择“费用”。页面向下滚动到“费用”部分，然后该部分展开或变得可见。

//Toggles Main Sections

$(document).ready(function(){

  //Hide (Collapse) the toggle containers on load
  $(".toggle-container").hide();

  //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
  $("h2.trigger").click(function(){
     $(this).toggleClass("active").next().slideToggle("slow");
     return false; //Prevent the browser jump to the link anchor
   }); 

 });

非常感谢任何帮助。如果有任何不清楚的地方，请告诉我，我会尝试改写或更好地解释。

以下是各部分的基本开头。我不会发布整个内容，它们很长:

        <div class="section" id="expenses">
            <div class="jump">
                <select class="jump-select">
                    <option selected="selected">Jump to Section</option>
                </select>
                <a href="#">Edit</a>
            </div>
            <h2 class="trigger" id="title-expenses"><a href="#">Expenses</a></h2>
            <div class="toggle-container">

“toggle-container”是 <h2> 隐藏/显示的 div .

Answer 1

从 <option> 的值中删除哈希标记标签，删除 onchange属性并将其添加到您的代码中。

$('.jump-select').change(function() {
    var cTarget = $(this).val();
    window.location.hash = cTarget;
});