-2

我正在为一个网站建立一个帮助中心，我想做一些类似于 Facebook 在他们的帮助中心网站上所做的事情：

https://www.facebook.com/help

如您所见，左侧有一个菜单。单击菜单项右侧带有箭头的部分时，该部分的子页面会滑入。您可以继续单击子页面并获取它们的嵌套子页面。它还使您能够回到以前的父母身边。

我一直在环顾四周，找不到任何类似的东西......也许我不是在寻找正确的东西，因为我正在寻找诸如“jQuery / Javascript滑动菜单”等之类的东西，但大多数结果都与移动菜单，这不是我要找的。

有人遇到过类似的事情吗？真的只需要一个起点。

非常感谢！

4

2 回答 2

1

在看了又看之后，我决定试一试，从头开始写……我让它工作了！:)

这有点 hacky，因为我对 jQuery 很陌生，所以如果有人想改进它，请随意。

如果您有任何问题或改进方法，请告诉我。

这是jQuery：

    jQuery(document).ready(function() {
    var content_height = jQuery(".column-right").height(); // Get height of main content
    jQuery(".subnav").height(content_height); // Apply height to menu div

    jQuery('a.forward').next().hide(); // Hide all children from the menu

    jQuery('a.forward').click(function(e) { // On click .forward
        e.preventDefault();

        // Clone next child, append to container, position absolute and animate left
        jQuery(this).next().clone(true, true).appendTo(".subnav").css({position: "absolute", left:"191px", top:"0", display:"block"}).animate({
            left:"0"
        }, 300);

        // Animate current menu out sight
        jQuery(this).closest("ul").animate({
            left:"-191px",
        }, 300);

        return false
    });

    jQuery('a.back').click(function(e) { // On click .back
        e.preventDefault();

        // Animate the previous hidden element so it comes back
        jQuery(this).closest("ul").prev().animate({
            left:"0",
        }, 300);

        // Animate current menu out of sight to the right
        // and remove after animation is completed
        jQuery(this).closest("ul").animate({
            left:"191px",
        }, 300, "linear",function(){jQuery(this).remove()});
        return false;
    });
});

这里是一些 CSS 和 HTML 的小提琴：http: //jsfiddle.net/Mh35b/

干杯

于 2013-09-02T21:00:51.897 回答
0

修改了上面的帖子，使其更具动态性。

// Code goes here

var PANEL_WIDTH = 235;
$(function() {

  $(".help-section").css("width", (PANEL_WIDTH * 2) + "px")
  $(".help-subsection, .help-question-panel, .help-left-panel").css("width", PANEL_WIDTH + "px");

  $(".help-subsection>li:not(.help-section-back)>a").click(function(e) {
    $(".help-question-panel").html($("ul", $(e.target).parent()).html());
    $(".help-question-panel").append("<li><a href='#' onclick='clickBack(event)' data-target='back'>Back</a></li>");
    $(".help-subsection").animate({
      "margin-left": "-" + PANEL_WIDTH + "px"
    }, 300);
  });
  $("a[data-target='question']").on("click", function(e) {
    console.log("test");
  });

});

function clickBack(e) {
  $(".help-subsection").animate({
    "margin-left": "0px"
  }, 200, function() {
    $(".help-question-panel").html("");
  });
}
.help-subsection {
  width: 300px;
  min-height: 100px;
  border: 1px solid #cdcdcd;
  border-radius: 7px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  padding: 5px;
  line-height: 1.2em;
  float: left;
}
.help-question-panel {
  width: 300px;
  min-height: 100px;
  border: 1px solid #cdcdcd;
  border-radius: 7px;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  padding: 5px;
  line-height: 1.2em;
}
.help-section {
  width: 600px;
}
.help-left-panel {
  width: 300px;
  margin-left: 20px;
  overflow: hidden;
}
.help-left-panel li {
  list-style: none;
  padding-top: 15px;
  padding-bottom: 15px;
  /*border-bottom: 1px solid #cdcdcd;*/
}
.help-left-panel li:not(:last-child) {
  border-bottom: 1px solid #cdcdcd;
}
.help-question-coll {
  display: none;
}
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <h3>Facebook Help Like Left Sliding Menu</h3>

  <div class="help-left-panel">
    <div class="help-section">
      <ul class="help-subsection">
        <li>
          <a href="#">Menu Item 1</a>
          <ul class="help-question-coll">
            <li><a href="#" data-target="question">This can be a realy really long question?</a>
            </li>
            <li><a href="#" data-target="question">I cannot anticipate how long this question will be! but it can be really really long.</a>
            </li>
            <li><a href="#" data-target="question">Question 1.3</a>
            </li>
            <li><a href="#" data-target="question">Question 1.4</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Menu Item 2</a>
          <ul class="help-question-coll">
            <li><a href="#" data-target="question">Question 2.1</a>
            </li>
            <li><a href="#" data-target="question">Question 2.2</a>
            </li>
            <li><a href="#" data-target="question">Question 2.3</a>
            </li>
            <li><a href="#" data-target="question">Question 2.4</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Menu Item 3</a>
          <ul class="help-question-coll">
            <li><a href="#" data-target="question">Question 3.1</a>
            </li>
            <li><a href="#" data-target="question">Question 3.2</a>
            </li>
            <li><a href="#" data-target="question">Question 3.3</a>
            </li>
            <li><a href="#" data-target="question">Question 3.4</a>
            </li>
          </ul>
        </li>
        <li class="help-section-back">
          <a href="#">Back</a>
        </li>
      </ul>
      <ul class="help-question-panel">

      </ul>
    </div>
  </div>
</body>

于 2016-07-04T01:40:06.360 回答