动态弹出菜单,在选择单选按钮时将类添加到父级(如 Trello 的)
Dynamic popup menu that adds class to parent when radio button is selected (like Trello's)
我想创建一个动态弹出菜单,在选择单选按钮时将类添加到"列表"父级//未选择时删除类(下面的HTML结构无法更改...只能更改 CSS 和 JS)
- 我正在尝试在单击时在每个"绿色齿轮"图标下直接弹出"列表弹出窗口"/单击关闭时隐藏(css 类)。
- 每当从弹出窗口中选择单选按钮时,我都需要它直接将类添加到相应列表的父div 中,同时不影响任何其他列表。
- 诀窍(对我来说)是使用位于每个列表divs 范围之外的 1 个弹出菜单动态发生所有这些。
- HTML 结构不能更改(这必须完全使用 JS 和 CSS 完成)。
这是我到目前为止得到的: https://jsfiddle.net/oneeezy/t5eou67k/
$(document).ready(function () {
/* Code to play with for show/hide popup
/* Code to play with for adding/removing classes when radio checked
$('.list-layouts input').click(function () {
$('.list-layouts input:not(:checked)').parent().removeClass("blue");
$('.list-layouts input:checked').parent().addClass("blue");
});
*/
});
/* Reset Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
h1 { padding: 0 0 .25rem; }
h2 { line-height: 1.6; }
aside { background: #e2e4e6; padding: 1rem; color: gray; margin: 1rem; border: 1px dashed gray; }
aside ul { list-style: inside; }
aside span { font-style: italic; color: rgba(0, 0, 0, .78); }
.page { background: rgba(137, 96, 158, .17); margin: 2rem 0; padding: 2rem; position: relative; }
.page::before { content: "<div> ...Scope"; color: rgba(0, 0, 0, .54); position: absolute; top: 0; left: 0; }
.page::after { content: "</div>"; color: rgba(0, 0, 0, .54); position: absolute; bottom: 0; left: 0; }
.purple { background: rgba(137, 96, 158, .17); }
.green { background: lime; }
.yellow { background: yellow; }
/* Trello (default tyles) */
.wrapper { display: flex; }
.list-wrapper { flex: 1; margin: 10px; }
.list { background: #e2e4e6; position: relative; padding: 0 10px 3px; }
.icon { display: block; position: absolute; top: 0; right: 0; width: 33px; height: 38px; background: lime; text-decoration: none; font-size: 2em; line-height: 1.3; color: darkgreen; }
.card { display: block; height: 50px; background: white; border-radius: 3px; border: 1px solid #ccc; padding: .5em; margin: 0 0 .5em; }
/* List Popup */
.list-popup { display: block; width: 350px; max-height: 800px; background: yellow; border-radius: 3px; border: 1px solid #ccc; padding: 1em; }
.list-popup p { padding: 0 0 1rem; }
.list-popup p span::after { content: "<div class='list-wrapper'>"; }
.list-layouts ul { list-style: none; }
.list-normal { }
.list-normal .list { }
.list-color { }
.list-color .list * { background: skyblue; }
.list-bold { }
.list-bold .list * { font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Description -->
<aside>
<h1>Dynamic popup menu that adds class to lists parent when radio button is selected // removes classes when unselected</h1>
<ul>
<li>I'm trying to make the <span class="yellow">"List Popup"</span> popup directly under each <span class="green">"Green Gear"</span> icon when clicked on/ hidden when clicked off (css classes).</li>
<li>Whenever a radio button is selected from the popup, I need it to add a class directly into the corresponding list's parent div, while not effecting any of the other lists.</li>
<li>The trick (for me) is making all of this happen dynamically with 1 popup menu that sits outside of each <span class="purple">lists divs scope</span>.</li>
</ul>
</aside>
<!-- Lists -->
<div class="page">
<div class="wrapper">
<div class="list-wrapper">
<div class="list">
<h2>List (1)</h2>
<a href="javascript:void(0);" class="icon">⚙</a>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
<div class="list-wrapper">
<div class="list">
<h2>List (2)</h2>
<a href="javascript:void(0);" class="icon">⚙</a>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
<div class="list-wrapper">
<div class="list">
<h2>List (3)</h2>
<a href="javascript:void(0);" class="icon">⚙</a>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
</div>
</div>
<!-- List Layout popup -->
<div class="page">
<div id="listPopup" class="list-popup">
<div>
<h3>List Popup</h3>
<p>These radio buttons should add a special class to the individual <span></span> when clicked on and removed when clicked off!</p>
</div>
<form class="list-layouts">
<ul>
<li>
<input type="radio" name="listLayout" id="listNormal">
<label for="listNormal">Normal</label>
</li>
<li>
<input type="radio" name="listLayout" id="listColor">
<label for="listColor">Bold</label>
</li>
<li>
<input type="radio" name="listLayout" id="listBold">
<label for="listBold">Italic</label>
</li>
</ul>
</form>
</div>
</div>
因此,
首先我们将使用以下代码将该类添加到列表父级的列表包装器中:
$('.icon').on('click', function () {
if(!$('#listPopup').hasClass("open")){
$('#listPopup').toggleClass("open");
}
$(this).parents('.list-wrapper').siblings().removeClass('blue');
if(!$(this).parents('.list-wrapper').hasClass("blue")){
$(this).parents('.list-wrapper').toggleClass("blue");
}
});
然后我们需要为无线电创建一个 onchange 函数来查找此类并将新类添加到该列表中。
$('.list-layouts input').on('change', function () {
var newClass = $(this).attr("id");
// Remove the following statement if you want your classes to stack up
$('.blue').removeClass("listNormal listColor listBold");
$('.blue').addClass(newClass);
});
这是整个事情在行动的小提琴的工作小提琴
相关文章:
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在映射数组中添加换行符
- 正在将数据主题添加到所有项目
- ZeroClipboard-在复制之前添加到值
- 我可以在json对象中添加一个函数吗
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何添加浮动和非浮动,其他
- 添加文字和评论功能更新Div
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 在函数中添加数组元素的数值
- 如何将歌曲添加到jPlayer
- 在html Select中添加搜索
- Java脚本时间添加
- FabricJs-限制主对象内添加对象的移动区域
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 如何在Google柱状图中动态添加行/列
- 正在尝试使用if和else添加类,但无法正常工作
- 动态弹出菜单,在选择单选按钮时将类添加到父级(如 Trello 的)