Question

我有一个href形式的内联块按钮，当它们被点击时，它们的状态变为tabbed，通过取消隐藏它来打开相应的面板（div），取消其他按钮并关闭所有其他面板。我的问题是如何让面板出现在相应的按钮行下面。例如，在较小的设备上，只有一个按钮可以放在一条线上，而在桌面上可以放置两个或更多个按钮。以下html适用于每行1个按钮，但如果在一行上有更多，则面板将在第二个按钮之前打开。

<div class="collapsible-panels">
  <a class="whyTabs ylead" href="#">Why Should I Lead?</a>

  <div class="whyTabs ylead">
    <p>If you lead a project you can...</p>
  </div>

  <a class="whyTabs yhelp" href="#">Why Should I Help?</a>

  <div class="whyTabs yhelp">
    <p>If you help with a project you can...</p>
  </div>
</div>

同样地，如果我这样做，html可以完美地用于一行中的2个按钮，但是如果我调整页面大小或使用不同的设备，页面上的按钮数量就会改变它。

<div class="collapsible-panels">
  <a class="whyTabs ylead" href="#">Why Should I Lead?</a>
  <a class="whyTabs yhelp" href="#">Why Should I Help?</a>

  <div class="whyTabs ylead">
    <p>If you lead a project you can...</p>
  </div>
  <div class="whyTabs yhelp">
    <p>If you help with a project you can...</p>
  </div>
</div>

我的问题是，如何根据情况在正确的位置打开这些面板。有没有简单的方法来使用CSS？或者我是否必须使用javascript / jquery来确定页面的布局并相应地调整html？有没有办法将html与父级相关而不在流程外？

以下是我的代码只有2个按钮的完整示例，但我想你可以看到我遇到的问题。

$(document).ready(function() {

    //Hide all div containers.
    $('div.collapsible-panels div').css('display', 'inline-block');
    $('div.collapsible-panels div').hide();

    //Append click event to the a element.
    $('div.collapsible-panels a').click(function() {

        //Declare our variables
        var clickedButton = $(this); //jquery object for the clicked button

        var collapsibleGroupClass = "." + clickedButton.attr('class').split(' ')[0]; //Class identifier for the clickedbutton's group of buttons and tabs
        var collapsibleTargetClass = "." + clickedButton.attr('class').split(' ')[1]; //Class identifier for the clickedbutton's tab identifier

        var targetTab = $("div.collapsible-panels div" + collapsibleGroupClass + collapsibleTargetClass); //Jquery object for targetted Tab

        var tabbedButton = $("div.collapsible-panels a.tabbed" + collapsibleGroupClass); //Jquery object for tabbed button
        var openTab = $("div.collapsible-panels div.open" + collapsibleGroupClass); //Jquery object for opened tab
        var openTargetTab = $("div.collapsible-panels div" + collapsibleGroupClass + collapsibleTargetClass + ".open"); //Jquery object for open targetted tab

        /**
         *Stop all previous animations
         *clear queue of animations
         *end immediately because new
         *animation is coming!
         */
        $('div.collapsible-panels div').stop(true, true);

        //If the no tab or only the target tab is open.
        if (openTab.length == 0 || openTargetTab.length != 0) {

            //Toggle clicked button to tabbed.
            clickedButton.toggleClass('tabbed');

            //Toggle selected tab and open status.
            targetTab.first().slideToggle(100).toggleClass('open');

        //Else (tab besides our target tab are open)
        } else {

            //Toggle tabbed buttons off.
            tabbedButton.toggleClass('tabbed');

            //Toggle clicked button to tabbed.
            clickedButton.toggleClass('tabbed');

            /**
             *Originally chose closing animation with callback,
             *however this has issues with fast and repeated clicks.
             *Tried other options and didn't like how they worked.
             *Decided upon instantly hide closing tabs and speeding
             *up all opening animations.
             */

            //Hide open tabs and remove open class. 
            openTab.hide().toggleClass('open');

            //Toggle target tab and open status
            targetTab.first().slideToggle(100).toggleClass('open');

            //End if/else statement
        }

        //return false to prevent default click event
        return false;

        //End click event
    });

    //End self-initiating function
});

.tabs {
  margin: 4%;
  text-align: center;
}
.tabs a {
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
  text-decoration: none;
  padding: 15px 25px;
  margin: 0px;
  background: #CE1F24;
  color: #FFF;
  border-radius: 15px;
  border: solid 1px #C00000;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}
.tabs a:hover {
  background: #B80000;
  border: solid 1px #880000;
  text-decoration: none;
  border-bottom-width: 0px;
}
.tabs a:focus {
  outline: none;
}
.tabs a.tabbed {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #587CAF;
  border: solid 1px #587CAF;
  border-bottom-width: 0px;
}
.tabs a:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #587CAF;
  border: solid 1px #587CAF;
  border-bottom-width: 0px;
}
.tabs div.yanswer {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  padding: 20px 60px;
  margin-top: 5px;
  background: #FFF;
  color: #000;
  border-radius: 40px;
  border: solid 4px #587CAF;
  z-index: 10;
}
.tabs div.yanswer p {
  font-size: 3em;
  width: auto;
}
.tabs div.yanswer ul {
  font-size: 1.3em;
}
.tabs div.yanswer p.smallfont {
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="collapsible-panels tabs">

  <a class="whyTabs ylead" href="#">Why Should I Lead?</a>

  <div class="whyTabs ylead yanswer">
    <p>If you lead a project you can...</p>
    <br>
    <ul>
      <li>Show management what you can do.</li>
      <li>Make decisions.</li>
      <li>Add to your resume.</li>
      <li>*Earn money or time off.*</li>
    </ul>
    <br>
    <p class="smallfont">*eligible for Tasks with 6+ week turnarounds</p>
  </div>

  <a class="whyTabs yhelp" href="#">Why Should I Help?</a>

  <div class="whyTabs yhelp yanswer">
    <p>If you help with a project you can...</p>
    <br>
    <ul>
      <li>Show management what you can do.</li>
      <li>Learn something new.</li>
      <li>Help make decisions.</li>
      <li>Add to your resume.</li>
    </ul>
  </div>

</div>

Answer 1

为了达到我想要的目的，我最终使用JS来动态构建页面。我使用了一些简单的jquery来检查页面的宽度

function checkWidth() {
    var windowsize = $(window).width();
    return windowsize;
}

然后使用此信息我决定每行应该有多少个面板。然后，我构建了包含该信息的页面，跟踪我制作了多少个面板，需要制作多少个面板，并且每次创建的面板都可以被panelsperRow整除时插入下拉html。如果创建的面板是要创建的最后一个面板，我还必须确保我有下拉信息。

使用css没有简单的方法。

动态定位的打开/关闭面板

1 个答案: