セマンティックUIアコーディオンオーバーラップ位置固定要素

Question

私は初心者ですので、私にご負担ください。サイドバーの下部にアコーディオンと位置固定要素があります。私の問題は、アコーディオンが開かれたときに、それが位置固定要素に重なることです。また、下の位置固定要素を越えてスクロール可能でないことを望みます。私はdivのポジショニングを試してきましたが、まだまだ進んでいません。誰かが私を啓発してください。ありがとうございました！

$(function() { 
 
\t $('.ui.accordion').accordion(); 
 
});

.ui.vertical.footer.segment { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<div class="ui sidebar vertical left menu overlay borderless visible"> 
 
       <div class="ui accordion"> 
 
        <a class="title item"> 
 
         <i class="fa fa-address-book" aria-hidden="true"></i> Menu <i class="dropdown icon"></i> 
 
        </a> 
 
        <div class="content"> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
       <div class="ui vertical footer segment" id="test"> 
 
        <i class="fa fa-search" aria-hidden="true"></i> Search 
 
        <button class="ui button"> 
 
         Go 
 
        </button> 
 
       </div> 
 
       </div> 
 
       
 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>

Answer 1

私はこの問題を解決するのに十分なCSSはきれいどのような方法を見つけることができませんでした。そこで、私はjQueryソリューションを探すことを決意しました。私はセマンティックUIでコールバックの使い方を見つけるのに少し苦労しました。要するに、私は時間を費やしました。特に、コメントコードを幅広く文書化して以来、私にはいくつかの点がありました。

私はここで$ (window) .resize (function().

を使用しているため、操作は、唯一のフルスクリーンモードでスニペットに良いことは、結果である：

$(function() { 
 

 
var oUser3233787 = {     // variables group name of User3233787 problem. 
 
    $mn : $('.ui.accordion'),   // jQuery Menu objet 
 
    mnC : $('.ui.accordion').height(), // height Menu close 
 
    mnO : 0,       // height Menu open (unknow for the moment) 
 
    Fmn : false,      // Flag menu open/close 
 
    foH : $('#test').outerHeight(),  // room size of footer height 
 
    mnX : $(window).height() - this.foH // room place max for the menu, deppending on window height 
 
}; 
 

 
oUser3233787.$mn.accordion({ 
 
    onOpen: function(v1, v2) {  // open menu event; (v1, v2 documented nowhere...?) 
 
     with (oUser3233787) { 
 
      if (mnO == 0)    // if menu open hight is unknow 
 
       mnO = $mn.height();  // get this one 
 

 
      $mn.height(mnO);   // set menu hight to open size 
 
      Fmn \t = true;     // set Flag = menu is open 
 

 
      if (mnO > mnX)    // if menu hight is out of room place 
 
       $mn.height(mnX);  // set the menu higt fit to it 
 
     } \t \t \t \t 
 
    }, 
 
    onClose: function(v1, v2) {  // close menu event 
 
     with (oUser3233787) { 
 
      $mn.height(mnC);   // set menu hight to closed size 
 
      Fmn \t = false;    // set Flag = menu is not open 
 
     } 
 
    } 
 
}); 
 

 
$(window).resize(function() { 
 
    with (oUser3233787) { 
 
     mnX = $(window).height() - foH; // keep this height for the oUser3233787 group 
 
     if (Fmn) {      // if menu is open 
 
      if (mnO > mnX)    // and if his open heigh is too big 
 
       $mn.height(mnX);   // reduce them at room height 
 
      if (mnO < mnX)    // but if there is enough room 
 
       $mn.height(mnO);   // restore his open high complete height 
 
     } 
 
    } 
 
}); 
 

 
}); // jQuery

.ui.vertical.footer.segment { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
.ui.accordion { 
 
\t overflow-y: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<div class="ui sidebar vertical left menu overlay borderless visible"> 
 
       <div class="ui accordion"> 
 
        <a class="title item"> 
 
         <i class="fa fa-address-book" aria-hidden="true"></i> Menu <i class="dropdown icon"></i> 
 
        </a> 
 
        <div class="content"> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
       <div class="ui vertical footer segment" id="test"> 
 
        <i class="fa fa-search" aria-hidden="true"></i> Search &nbsp; 
 
        <button class="ui button"> 
 
         Go 
 
        </button> 
 
       </div> 
 
       </div> 
 
       
 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>