Question

我正在尝试对<select>下拉列表进行编码，以便在点击某个<option>时，该页面将使用常规锚点/ 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;
});

Answer 2

您可以使用您在值中已有的选择器添加change处理程序来执行此处的工作：

$(".jump-select").change(function() {
  var val = $(this).val();
  $(val + ":hidden").slideDown("slow").prev().addClass("active");
  window.location.hash = val;
});

:hidden selector是因为如果它已经扩展（:visible），没有理由搞乱它。

如果你想要一点点天赋，你可以动画到那个部分，而不是跳到那里，像这样：

$(".jump-select").change(function() {
  var val = $(this).val();
  $(val + ":hidden").slideDown("slow").prev().addClass("active");
  $("html, body").animate({ scrollTop: $(val).scrollTop() }, 200);
});

如果您不希望它完全位于顶部，则可以减去一些金额;如果您希望窗口顶部的$(val).prev().scrollTop()包含在滚动视图中，则可以使用<h2>。

Answer 3

很好，不知道你的html页面的结构我会在这里猜测

尝试在您的javascript部分添加此内容

        $('.jump-select').change(function() {
                    var a = $(this).val();
        $(a).find('h2.trigger').click();
                    window.location.hash = a;
    });

使用<option>滚动到锚点，然后打开部分</option>

3 个答案: