CSS 手風琴菜單帶圖片
[英]CSS accordion menu with pictures
問題描述
有人可以幫助我使用 jQuery 執行以下操作嗎？
目前，我在 div 容器中有一些圖像，對於特定的背景，我必須使用 position: absolute。 我的目標是實現一個相應的菜單，用戶單擊“菜單+”圖像按鈕，然后圖像按鈕切換回“菜單-”。
這是我所做的：
body{ background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg'); }.openmenu{ position:fixed; margin:0 auto; width:300px; overflow-y:auto; overflow-x: hidden; }.img1 { position: absolute; top: 0px; left: 18px; z-index: -1; }.img2 { position: absolute; top: 102px; left: 18px; }.img3 { position: absolute; top: 217px; left: 18px; } #pic-wrapper{ margin:2em auto; position:absolute; cursor:pointer } #pic{ -moz-transition:all 1s ease-out; -webkit-transition:all 1s ease-out; -o-transition:all 1s ease-out; -ms-transition:all 1s ease-out; position:absolute; z-index:1; opacity:1 } #pic-inner{ z-index:0; position:absolute; } #pic:hover{ opacity:0 }
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <body> <div id="pic-wrapper"> <div class="img1"> <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic"> <img src="https://provact.altervista.org/newct/colonna_sx/home_on.png" id="pic-inner"> </div> <div class="img2"> <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic"> <img src="https://provact.altervista.org/newct/colonna_sx/scheda_on.png" id="pic-inner"> </div> <div class="img3"> <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic"> <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_on.png" id="pic-inner"> </div> </div>這是我想要創建的結果：
任何幫助/方向將不勝感激。 謝謝。
2 個解決方案
解決方案1
1 2022-08-29 03:43:24
$('.accordion-section-title').click(function(e) { var currentAttrvalue = $(this).attr('href'); if ($(e.target).is('.active')) { $(this).removeClass('active'); $('.accordion-section-content:visible').slideUp(300); } else { $('.accordion-section-title').removeClass('active').filter(this).addClass('active'); $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300); } });
.accordion { overflow: hidden; border-radius: 4px; background: transparent; }.accordion-section-title { width: 100%; padding: 15px; }.accordion-section-title { width: 100%; padding: 15px; display: inline-block; background: transparent; border-bottom: 1px solid #1a1a1a; font-size: 1.2em; color: #fff; transition: all linear 0.5s; text-decoration: none; }.accordion-section-title.active { background-color: #4c4c4c; text-decoration: none; }.accordion-section-title:hover { background-color: grey; text-decoration: none; }.accordion-section:last-child.accordion-section-title { border-bottom: none; }.accordion-section-content { padding: 15px; display: none; color: white; }.accordion-section { background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg'); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1"> <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic"> </a> <div id="accordion-1" class="accordion-section-content"> <p>This is first accordion section</p> </div> <a class="accordion-section-title" href="#accordion-2"> <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic"> </a> <div id="accordion-2" class="accordion-section-content"> <p> this is second accordian section</p> </div> <a class="accordion-section-title" href="#accordion-3"> <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic"> </a> <div id="accordion-3" class="accordion-section-content"> <p> this is third accordian section</p> </div> </div> </div>
解決方案2
0 2022-09-01 07:15:16
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style>.accordion { overflow: hidden; border-radius: 4px; background: transparent; }.accordion-section-title { width: 100%; padding: 15px; }.accordion-section-title { width: 100%; padding: 15px; display: inline-block; background: transparent; border-bottom: 1px solid #1a1a1a; font-size: 1.2em; color: #fff; transition: all linear 0.5s; text-decoration: none; }.accordion-section-title.active { background-color: #4c4c4c; text-decoration: none; }.accordion-section-title:hover { background-color: grey; text-decoration: none; }.accordion-section:last-child.accordion-section-title { border-bottom: none; }.accordion-section-content { padding: 15px; display: none; color: white; }.accordion-section { background-image:url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg'); } </style> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1"> <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic"> </a> <div id="accordion-1" class="accordion-section-content"> <p>This is first accordion section</p> </div> <a class="accordion-section-title" href="#accordion-2"> <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic"> </a> <div id="accordion-2" class="accordion-section-content"> <p> this is second accordian section</p> </div> <a class="accordion-section-title" href="#accordion-3"> <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic"> </a> <div id="accordion-3" class="accordion-section-content"> <p> this is third accordian section</p> </div> </div> </div> <script> $('.accordion-section-content').hide(); $('.accordion-section-title').click(function(e) { $('.accordion-section-content').hide(); var currentAttrvalue = $(this).attr('href'); if($(this).hasClass('active')) { $(this).removeClass('active'); } else { $(this).addClass('active'); } $(currentAttrvalue).slideToggle(); }); </script>
CSS手風琴菜單按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.