Question

我正在用jQuery构建一个简单的决策树。我运行正常，但我想添加更多功能。目前我有这个：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$('ul').hide();

$('h3').css('cursor','pointer');

$('h3').click(function(){
 $('.show').slideToggle('fast');        
});

$('ul li a').click(function(){ 
 $(this).next('ul').slideToggle('fast');
});

});
</script>

<h3 class="parent">Is this computer a Mac?</h3>
<ul class="show">
  <li>Does this computer have Windows?</li>
  <li><a href="#"><strong>YES</strong></a>
    <ul>
      <li>Do you use Chrome?</li>
      <li><a href="#"><strong>YES</strong></a>
        <ul>
          <li>Do you like it?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great, Keep Using It!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Try Firefox Maybe... </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#"><strong>NO</strong></a>
        <ul>
          <li> You should try it.</li>
        </ul>
      </li>
    </ul>
</li>
  <li><a href="#"><strong>NO</strong></a>
    <ul>
      <li>Are you using Linux?</li>
      <li><a href="#"><strong>YES</strong></a>
        <ul>
          <li>Do You Like it?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Too Bad...</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#"><strong>NO</strong></a>
        <ul>
          <li>Have You Heard of Linux?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Check it out online!</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

例如，我想要发生的是，当用户点击“是”时，“否”选项消失...每次用户单击“是”选项时都会发生这种情况。这与NO相反，YES会消失。

我已经尝试过一些东西，比如.next（）。hide（），replaceWith（）等......但是我无法让它工作。我在想兄弟姐妹（）会是你的选择，但马上就失败了......

有什么建议吗？

非常感谢！

Answer 1

兄弟姐妹是正确的想法，但你需要先回到li元素，因为你想要隐藏它的兄弟而不是a元素..

以下是一个工作示例：http://www.jsfiddle.net/MxgpT/

我只是在你的代码中添加

$('a').click( function(){
    $(this).closest('li').siblings(':not(:first-child)').hide();
    });

Answer 2

我更新并简化了ListUI.com帖子中出现的代码。这是交互式决策指南的最新版本。 http://www.guiideas.com/2013/09/interactive-decision-guide.html

决策树jQuery - 如果未选择，如何隐藏问题？

2 个答案: