他のコンテンツの上に戻る

Question

私たちは現在、選択入力を拡張可能なul要素に変換するNice SelectというJSプラグインを使用しています。私は拡張可能なハンバーガーメニューの下部にul要素を持っています。メニューの下部にあるli項目の数によって、メニューがオーバーフローし、yスクロールが発生しています。これを防ぐために、私はli項目をメニュー内の他のコンテンツの上に上に展開したいと思います。私は相対的に要素をulコンテナの上に配置して遊んだことがあるが、あまり成功していない。ここでは、状況の簡単な例を掲載しました。ご協力いただきありがとうございます！

$(function() { 
 
    $('.list').toggle(); 
 
    $(".current").click(function() { 
 
    $('.list').toggle(); 
 
    }); 
 
    $(".option").click(function() { 
 
    $('.current').text($(this).text()); 
 
    }); 
 
})

.container { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    border: 3px solid black; 
 
} 
 

 
.content { 
 
    background-color: red; 
 
    height: 200px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="content"> 
 

 
    </div> 
 
    <div class="menu 
 
    "><span class="current" style="">United States</span> 
 
    <ul class="list"> 
 
     <li class="option">United Arab Emirates</li> 
 
     <li class="option">United States</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

私は基本的な作業バージョンを提供するために、あなたの例を編集しました。私はあなたが何を意味しているかを完全には分かっていないので、いくつかの変更を提案してください。

$(function() { 
 
    $('.list').toggle(); 
 
    $(".current").click(function() { 
 
    $('.list').toggle(); 
 
    }); 
 
    $(".option").click(function() { 
 
    $('.current').text($(this).text()); 
 
    }); 
 
})

.container { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
} 
 

 
.content { 
 
    background-color: red; 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
.menu { 
 
    // 
 
} 
 

 
.menu ul { 
 
    position: relative; 
 
} 
 

 
.menu ul li { 
 
    position: relative; 
 
    top: -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="content"> 
 

 
    </div> 
 
    <div class="menu"> 
 
    <span class="current" style="">United States</span> 
 
    <ul class="list"> 
 
     <li class="option">United Arab Emirates</li> 
 
     <li class="option">United States</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

$(function() { 
 
    $('.list').toggle(); 
 
    $(".current").click(function() { 
 
    $('.list').toggle(); 
 
    }); 
 
    $(".option").click(function() { 
 
    $('.current').text($(this).text()); 
 
    }); 
 
})

.container { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    border: 3px solid black; 
 
} 
 

 
.content { 
 
    background-color: red; 
 
    height: 150px; 
 
    width: 100%; 
 
} 
 
.menu{ 
 
    position:relative; 
 
} 
 
.list{ 
 
position:absolute; 
 
bottom:20px; 
 
    left:0; 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    border:1px solid black; 
 
    box-sizing:border-box; 
 
} 
 
.list li{ 
 
background-color:white; 
 
width:100%; 
 
    display:block; 
 
    border:1px solid black; 
 
    box-sizing:border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="content"> 
 

 
    </div> 
 
    <div class="menu 
 
    "><span class="current" style="">United States</span> 
 
    <ul class="list"> 
 
     <li class="option">United Arab Emirates</li> 
 
     <li class="option">United States</li> 
 
    </ul> 
 
    </div> 
 
</div>