jquery - 选项卡 DIV 停靠在浏览器中。单击时使用 jquery 滑入和滑出屏幕

Question

我有几件事想用附图中的 Divs 做，但我一直无法弄清楚。这些 Div 使用 CSS 定位停靠在浏览器的底 Angular 。我想使用 CSS 为每个选项卡添加一个选项卡，并在用户单击选项卡部分时让它在屏幕上上下滑动，隐藏时仅显示选项卡部分。现在，我在隐藏 div 的 Angular 落里有 (x)。我宁愿将标题文本放在选项卡上而不是放在 div 中。

任何有关使此 div 成为选项卡的帮助以及有关关闭时 jquery slidedown 的一些想法都会有所帮助。谢谢。

.ib {
  background: #FFFAEA;
  border: solid #cab781 1px;
  display: inline-block;
  width:250px;
  height: 98%;
}
.narrow {
  width:150px;
}


    $(document).on('click', '#close1,#close2', function (e) {
        $(this).parent().fadeOut(500);

        e.stopPropagation();
    });

<footer id="footer" class="footer" runat="server">
    <div id="supportDiv" class="ib questionbg narrow" runat="server">
        <span id='close1'>x</span>
    </div>

    <div id="documentsDiv" class="ib" style="overflow:auto" runat="server">
        <span id='close2'>x</span>
        <asp:Label class="helpheader" runat="server">Help Documents</asp:Label>
        <div style="margin-left:20px; vertical-align:top">
            <asp:PlaceHolder id="documentList" runat="server"></asp:PlaceHolder>
        </div>
    </div>

</footer>

Answer 1

所以它有点粗糙，但在这里我使用 jQuery 创建选项卡控件 DOM 元素，并将它们作为 .ib 选项卡元素的第一个子元素插入。然后我让页脚监听选项卡控件元素上的点击，并根据需要切换选项卡。您需要注意的是，如果用户选择了不同的选项卡，请在您打开新选项卡时关闭他们最后的选择。

正如我所说，它有点粗糙。还没有弄清楚为什么 slideToggle 在隐藏选项卡内容的过程中将它从容器 el 中分离出来，但除此之外它似乎正在做你正在寻找的事情。当然，您需要创建一些比我拥有的更漂亮的 CSS。再次，粗糙。

/***
 * First, we have to create the tab-control functionality
 *  for each of our footer tab-panes
 ***/
$(".ib").each(function() {
  // For each tab, if it has a title, we can use that for our tab title.
  var tabEl = $(this);
  var tabTitle = tabEl.find(".helpheader").text();
  var leftPos = tabEl.index() * 130;
  // Create the tab control DOM structure...
  var tabBar = "<div class='tab-control'><span class='tab-title'>" + tabTitle + "</span></div>";
  // Insert that tab control as the first child of the tab.
  tabEl.children().first().before(tabBar);
  // Hide the rest of the tab elements, showing only the tab control.
  tabEl.find(":first-child").siblings().hide();
  // use the closedTab class on this tab
  tabEl.css("left", leftPos+"px").addClass("closedTab");
});


/****
 * Handler for clicks on the tab-control
 *  This should hide the tab-control, show the tab
 *  itself, change the class from closed to open, and
 *  reverse that process on any displayed siblings.
 ****/
$("#footer").on("click", ".tab-control", function() {
  // Get the specific tab element.
  var tabEl = $(this).parent();
  // hide the tab-control, and show the rest of the content.
  $(this).hide().siblings().show();
  // remove the closedTab class, add the openTab.
  tabEl.addClass("openTab").removeClass("closedTab");
  // This next line is doing a LOT -- it takes the current
  //  tabEl, and goes through any siblings marked as openTab,
  //  changes them from openTab to closedTab, and shows the
  //  tab-control and hides everything else.
  tabEl.siblings(".openTab")
    .removeClass("openTab")
    .addClass("closedTab")
    .find(":first-child")
    .show()
    .siblings()
    .slideToggle();
})
$("#footer").on('click', '.close', function(e) {
  // get the current tab element.
  var tabEl = $(this).parent();
  // toggle the current tab from openTab to closedTab.
  tabEl.addClass("closedTab").removeClass("openTab");
  // hide all content except the tab-control.
  tabEl.find(":first-child").show().siblings().slideToggle();
});

.footer {
  position: fixed;
  bottom: 0;
  height: 100px;
}
.ib {
  display: inline-block;
  position: absolute;
  bottom: 0;
}

.ib-content {
  margin-left: 20px;
  vertical-align: top;
  position: relative;
}

.tab-control {
  width: 120px;
  height: 20px;
  background: #FFFAEA;
  border: solid #cab781 1px;
  overflow: off;
}

.closedTab {
}

.openTab {
  background: #FFFAEA;
  border: solid #cab781 1px;
  display: inline-block;
  width: 250px;
  height: 50px;
}

.narrow {
  width: 150px;
}
.close {
  position: relative;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer" class="footer" runat="server">
  <div id="supportDiv" class="ib questionbg narrow" runat="server">
    <span class='close'>x</span>
    <div class='ib-content'>
      <p>Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Nulla quis
        lorem ut libero malesuada feugiat. Donec sollicitudin molestie malesuada.</p>
    </div>
  </div>

  <div id="documentsDiv" class="ib" style="overflow:auto" runat="server">
    <span class='close'>x</span>
    <asp:Label class="helpheader" runat="server">Help Documents</asp:Label>
    <div class='ib-content'>
      <p>Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla
        porttitor accumsan tincidunt.</p>
    </div>
  </div>

</footer>