Question

我正在寻找一种方法来禁用左侧的所有菜单项。

在每个div上都有一个Execute按钮和Next按钮。在单击执行按钮之前，需要禁用下一个按钮。

除了启用下一个按钮外，还需要启用菜单中的下一个项目并进行点击。

单击“下一步”也会转到左侧菜单中的下一个项目。

Javscript：

// nav
$(".nav-content").hide();
$("ul.nav li:first").addClass("active").show();
$(".nav-content:first").show();

// onclick event
$("ul.nav li").click(function() {
    $("ul.nav li").removeClass("active");
    $(this).addClass("active");
    $(".nav-content").hide();

    var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
});

HTML

<div id="wrap">

    <ul class="nav">
        <li><a href="#step1"><span>1</span> ONE</a></li>
        <li><a href="#step2"><span>2</span> TWO</a></li>
        <li><a href="#step3"><span>3</span> THREE</a></li>
    </ul>

    <div class="nav-container"> 

    <div id="step1" class="nav-content"> 
        <p>ONE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next" onclick="">Next</button>

    </div> <!-- /step1 -->

    <div id="step2" class="nav-content"> 
        <p>TWO</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next"  onclick="">Next</button>

    </div> <!-- /step2 -->

    <div id="step3" class="nav-content"> 
        <p>THREE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next"  onclick="">Next</button>

    </div> <!-- /step3 -->

CSS

#wrap {
    width: 100%;
}
#wrap ul.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 250px;
    float: left;
}
#wrap ul.nav li {
    min-height: 60px;
    background-color: #2b6ed6;
    border-bottom: 1px solid #92b4ea;
}
#wrap ul.nav li span {
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
    font-size: 40px;
}
#wrap ul.nav li a {
    color: #fff;
    display: block;
    padding: 20px 10px;
    text-decoration: none;
    line-height: 20px;
    position: relative;
    top: 0px;
    font-size: 99%;
}
#wrap .enabled {
}
#wrap .disabled {
}
#wrap ul.nav li a:focus {
    outline: none;
}
/*#wrap ul.nav li.active, */
 #wrap ul.nav li.active a {
    color: #000;
}
#wrap ul.nav li.active a:after {
    left: 100%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
#wrap ul.nav li.active a:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #2b6ed6;
    border-width: 30px;
    top: 50%;
    margin-top: -30px;
}
#wrap .nav-container {
    float: left;
    margin: 0;
    padding: 0;
    width: 60%;
    border-right: 1px solid #ccc;
    border-bottom:1px solid #ccc;
}
#wrap .nav-content {
    margin: 0;
    padding: 0;
}
#wrap .nav-content p {
    padding: 0 0 0 35px;
}

我也把它放在http://jsfiddle.net/XVLaX/1/

谢谢！

Answer 1

根据我对这个问题的理解，这需要一些东西来使这项工作。

对现有HTML进行一些前置条件更改，以使以下JS代码生效，我在列表项中添加了ID。

<ul class="nav">
    <li id="nav-step1"><a href="#step1"><span>1</span> ONE</a></li>
    <li id="nav-step2"><a href="#step2"><span>2</span> TWO</a></li>
    <li id="nav-step3"><a href="#step3"><span>3</span> THREE</a></li>
    <li id="nav-step4"><a href="#step4"><span>4</span> FOUR </a></li>
    <li id="nav-step5"><a href="#step5"><span>5</span> FIVE</a></li>
    <li id="nav-step6"><a href="#step6"><span>6</span> SIX</a></li>
    <li id="nav-step7"><a href="#step7"><span>7</span> SEVEN</a></li>
    <li id="nav-step8"><a href="#step8"><span>8</span> EIGHT</a></li>
</ul>

在CSS的一些先决条件中，我添加了一个禁用类来直观地区分状态。

#csp-wrap ul.nav li.disabled a,
#csp-wrap ul.nav li.active a {
    cursor: default;
}

#csp-wrap .disabled {
    filter: alpha(opacity=50);
    opacity: .5;
}

首先，您需要设置一个初始状态，其中除了第一个列表项以外的所有列表项都被禁用，并且所有下一个按钮都被禁用

// get all list items
var listItems = $("ul.nav li");

// disable all list items
listItems.addClass('disabled');

// enable the first list item
listItems.first().removeClass('disabled');

// disable all next buttons
$('.next').prop('disabled', true);

为执行按钮设置单击处理程序，以启用相关的下一个按钮。

// execute click handler
$('.execute').click(function(event) {
   // Get the associated next button
    $(this).siblings('.next').prop('disabled', false);
});

为下一个按钮创建一个单击处理程序，以处理下一步。

// next click handler
$('.next').click(function(event) {
    // get the associated nav item
    var navId = '#nav-' + $(this).parents('.nav-content').attr('id');
    // enable the next list item
    $(navId).next().removeClass('disabled');
    // trigger click on the next list item to step to it
    $(navId).next().trigger('click');
});

最后，修改onclick事件以不考虑活动列表项或任何禁用列表项。

// onclick event
$("ul.nav").on({
    click: function () {
        $("ul.nav li").removeClass("active");
        $(this).addClass("active");
        $(".nav-content").hide();

        var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
    }
}, 'li:not(.disabled,.active)');

你可以在叉形小提琴中试试：http://jsfiddle.net/UZwqx/3/

链接/按钮被禁用，直到单击另一个按钮

1 个答案: