Question

我正在尝试根据多级列表中的用户选择来构建url。用户选择四个选项，这四个选项将创建检索文档所需的URL。

示例：

<ul id="nav">
   <li><a href="#">Report name</a>
      <ul>
         <li><a href="#">Year</a>
            <ul>
           <li><a href="#">2010</a>
                  <ul>
                     <li>Jan</li>
                     <li>Feb</li>
                     <li>March</li>
                 </ul>
             </li>
             <li><a href="#">2011</a></li>
             <li><a href="#">2012</a></li>
             <li><a href="#">2013</a></li>
             <li><a href="#">2014</a></li>
         </ul>
     </li>
 </ul>
</li>

<!-- etc. -->

</ul>

所以我会选择报告名称＆gt;年份＆gt;月份，这将构建一个等于文件路径的URL。

e.g。 http://www.example.com/Report1/2010/Jan

是否有人可能对如何做到这一点有任何想法。

Answer 1

好的有几种选择，我建议使用javascript。

因此，基本上，您将检查是否单击了<li>，如果是，则将某个值添加到字符串，使用该构建的字符串重定向页面。这是我的意思的一个例子：

http://jsfiddle.net/35XDn/4/

Answer 2

以下是$(this)用于获取所点击内容值的示例。我在这个例子中使用JQuery。

必须在年份值中添加id。你不必这样做，你可以使用jquery选择器来获得正确的值。这简单得多。

<ul id="nav">
<li><a href="#">Report name</a>
      <ul>
         <li><a href="#">Year</a>
            <ul>
           <li id='2010'><a href="#">2010</a>
                  <ul>
                     <li>Jan</li>
                     <li>Feb</li>
                     <li>March</li>
                 </ul>
             </li>
             <li><a href="#">2011</a></li>
             <li><a href="#">2012</a></li>
             <li><a href="#">2013</a></li>
             <li><a href="#">2014</a></li>
         </ul>
     </li>
 </ul>
</li>

<!-- etc. -->

</ul>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>

javascript看起来像这样：

$('#2010 li').click(function()
                    {
                        var year=$(this).parent().parent().attr('id');
                        var month=$(this).text();
                        console.log(month+' '+year);
                        //this will show you Jan and 2010 in the log. You can use this variable to append to a URL string.
                    });

根据<ul> <li> </li> </ul>中的选择创建URL

2 个答案: