CSS 手风琴菜单带图片
[英]CSS accordion menu with pictures
问题描述
Can someone pls assist me with a means of performing the following using jQuery?
有人可以帮助我使用 jQuery 执行以下操作吗？
Currently, I have some images in a div container, and as for a specific background I have to use the position: absolute.目前，我在 div 容器中有一些图像，对于特定的背景，我必须使用 position: absolute。 My goal is to implement an according menu where the user clicks the "Menu+" image button, the image button then toggles back to "Menu-".我的目标是实现一个相应的菜单，用户单击“菜单+”图像按钮，然后图像按钮切换回“菜单-”。
Here what I have done:这是我所做的：
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> Here the result I would like to create:这是我想要创建的结果：
Any help/direction would be much appreciated.任何帮助/方向将不胜感激。 Thanks.谢谢。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS手风琴菜单按钮 - CSS accordion menu button
手风琴菜单的 CSS 完全不透明 - Css full opacity for accordion menu
如何在CSS的弹出菜单上添加手风琴菜单 - How to add accordion menu on a flyout menu in css
为移动站点Jquery和CSS创建一个手风琴菜单 - Create an Accordion Menu for Mobile Site Jquery and CSS
折叠div时手风琴菜单CSS3，HTML5问题 - Accordion Menu CSS3, HTML5 problems with collapsing divs
CSS多层手风琴菜单—指针和图标 - CSS Multi-Level Accordion Menu — Pointer & Icon
手风琴列表的加号/减号图片 - Plus / Minus pictures for accordion list
手风琴菜单展开 - 菜单更改 - Accordion menu expand - menu change
未打开手风琴菜单的第二个菜单 - not open second menu of accordion menu
Drupal 8手风琴菜单 - Drupal 8 Accordion menu
相关标签