我不想當目標是相同的切換功能

Question

我試圖創建一步一步的順序，並且我使用data-id =「x」告訴哪些內容在它可見時已被選中。

我試圖完成的是，如果數據ID爲具有相同的目標切換不會採取功能，但簡單地選擇其他div將被選中。

任何想法？

這是我的代碼：

$('li').on('click',function(e) { 
    e.preventDefault(); 
    // remove selected class from links after the current one 
    $(this).closest('section').nextAll('section').find('li').removeClass('selected'); 
    // remove selected from siblings, toggle current selected class 
    $(this).siblings('li').removeClass('selected').end().toggleClass('selected'); 
    var $target = $('#'+$(this).attr('data-id')); 
    if ($target.length) { 
    // hide any steps after the current one that may be shown 
    $(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active'); 
    // toggle display of selected step 
    $target.toggleClass('active'); 
    } else { 
    console.log('do something else to end this thing'); 
    } 
}) 

This是我的jsfiddle計有例子和上面的代碼。

我可以通過我已有的代碼和一個小小的解釋來得到代碼的外觀示例嗎？謝謝。

Answer 1

您可以使用pointer-events: none;爲.selected類

$('li').on('click',function(e) { 
 
    
 
\t if($(this).hasClass('selected')){ 
 
\t \t return false; 
 
\t } else { 
 
\t \t e.preventDefault(); 
 
\t \t // remove selected class from links after the current one 
 
\t \t $(this).closest('section').nextAll('section').find('li').removeClass('selected'); 
 
\t \t // remove selected from siblings, toggle current selected class 
 
\t \t $(this).siblings('li').removeClass('selected').end().addClass('selected'); 
 
\t \t var $target = $('#'+$(this).attr('data-id')); 
 
\t \t if ($target.length) { 
 
\t \t \t // hide any steps after the current one that may be shown 
 
\t \t \t $(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active'); 
 
\t \t \t // toggle display of selected step 
 
\t \t \t $target.addClass('active'); 
 
\t \t } else { 
 
\t \t \t console.log('do something else to end this thing'); 
 
\t \t } 
 
\t } 
 
})

h1 { 
 
    font-size: 20px; 
 
} 
 
.step { 
 
    display: none; 
 
} 
 
.active { 
 
    display: block; 
 
} 
 
.selected { 
 
    background: #27ae60 !important; 
 
    color: #fff !important; 
 
} 
 
ul { 
 
    padding:0; 
 
} 
 
li { 
 
    list-style: none; 
 
} 
 
.bananas { 
 
    padding: 20px; 
 
    color: #7f8c8d; 
 
    background: #ecf0f1; 
 
    display: inline-block; 
 
    border-radius: 10px; 
 
    cursor: pointer; 
 
    width: 25%; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    font-weight: 700; 
 
} 
 
.hi { 
 
    color: #e74c3c; 
 
    border-bottom: 2px dotted #e74c3c; 
 
} 
 
h1 { 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
} 
 

 
#same_target { 
 
    margin-top: 30px; 
 
    background: #9b59b6; 
 
    padding: 20px; 
 
    color: #fff; 
 
} 
 

 
#same_target p { 
 
    margin-bottom:0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 

 

 
<div class="container"> 
 
    <section> 
 
    <h1>First step, please choose something</h1> 
 
    <ul> 
 
     <li class="bananas" data-id="one"> 
 
      Sprite 
 
     </li> 
 
     <li class="bananas" data-id="two"> 
 
      King Kong 
 
     </li> 
 
     <li class="bananas" data-id="three"> 
 
      Astronauts 
 
     </li> 
 
     </ul> 
 
    </section> 
 

 
    <section> 
 
    <div id="one" class="step"> 
 
    <h1>Second step for <span class="hi">Sprite</span> - choose another</h1> 
 
     <ul> 
 
     <li class="bananas" data-id="same_target"> 
 
      McDonalds 
 
     </li> 
 
     <li class="bananas" data-id="same_target"> 
 
      Burger King 
 
     </li> 
 
     <li class="bananas" data-id="same_target"> 
 
      Tim Hortons 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="two" class="step"> 
 
     <h1>Second step for <span class="hi">King Kong</span> - choose another</h1> 
 
     <ul> 
 
     <li class="bananas" data-id="same_target"> 
 
      McDonalds 
 
     </li> 
 
     <li class="bananas" data-id="same_target"> 
 
      Burger King 
 
     </li> 
 
     <li class="bananas" data-id="same_target"> 
 
      Tim Hortons 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="three" class="step"> 
 
     <h1>Second step for <span class="hi">Astronauts</span> - choose another</h1> 
 
     <ul> 
 
     <li class="bananas" data-id="same_target"> 
 
      McDonalds 
 
     </li> 
 
     <li class="bananas" data-id="same_target"> 
 
      Burger King 
 
     </li> 
 
     <li class="bananas" data-id="same_target"> 
 
      Tim Hortons 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 

 
    <section> 
 
    <div id="same_target" class="step"> 
 
     <p class="fml"> 
 
     Now select another brand and watch this content toggle, even when the target is the same. 
 
     </p> 
 
    </div> 
 
    </section> 
 
</div>