jquery 接下来与 ol

标签 jquery jquery-ui

我想在单击链接时切换订单列表

<li id="1" style="display: list-item;">
    <div class='group'>
        <div style='float:left;'>
            <span>&nbsp;</span>
            **<a class='expand' href='#'>Group 1</a>**
        </div>
        <div style='float:right;'>
            <a href='#'>Edit</a>
            <a href='#'>Delete</a>
        </div>
        <div style='clear:both;'></div>
    </div>
    **<ol style='display:none;'>**
        <li id="2" style="display: list-item;">
            <div class='patent'>
                <div style='float:left;'>
                    <span>&nbsp;</span>
                    <a href='#'>Patent 1</a>
                    <em>The description of patent 1</em>
                </div>
                <div style='float:right;'>
                    <a href='#'>Edit</a>
                    <a href='#'>Delete</a>
                </div>
                <div style='clear:both;'></div>
            </div>
        </li>
        <li id="3" style="display: list-item;">
            <div class='patent'>
                <div style='float:left;'>
                    <span>&nbsp;</span>
                    <a href='#'>Patent 2</a>
                    <em>The description of patent 2</em>
                </div>
                <div style='float:right;'>
                    <a href='#'>Edit</a>
                    <a href='#'>Delete</a>
                </div>
                <div style='clear:both;'></div>
            </div>
        </li>
    **</ol>**
</li>

当我点击粗体链接时,我希望切换 ol。同一类可以有很多 ol 和很多链接。

我的尝试是

<script>
$(document).ready(function(){
    $('.expand').click(function() {
        $(this).closest('ol').slideToggle('slow');
    });
});
</script>

最佳答案

你应该这样做

$(document).ready(function(){
    $('.expand').click(function() {
        $(this).closest('li').find('ol').slideToggle('slow');
    });
});

附注:如果我没记错的话,数字不是有效的 ID

关于jquery 接下来与 ol,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11222878/

相关文章:

javascript - 带有 ASP.NET 的 jQuery UI 模式确认对话框未触发 onClick 事件

jquery - 修复了带有粘性标题的某个点后的左侧导航

javascript - 根据单选按钮动态更新选择

jquery-ui - jQuery UI 可按固定行排序

php - jQuery UI - 加速自动完成

javascript - jquery ui 对话框按钮

jquery 选择 div 内的 div

javascript - 向链接添加延迟

javascript - 仍然无法使用 JavaScript 获取 HTML 元素的原始高度

jquery - 为什么我的 jQuery 日期选择器 UI 插件不在年份字段中显示向上/向下箭头