php - 使用 jquery 和 PHP 显示 'active' 链接并在当前页面上保持菜单 slider 打开的 Accordion 菜单问题

Question

由于我对 jQuery 和 PHP 知之甚少，我几乎完成了一个 Accordion 菜单，当事件页面打开时，链接显示为“事件”，并且当在事件页面上时， slider 菜单在正确的部分保持打开状态.

我在底部链接中添加了一些 php。子链接在事件页面上显示为事件。但是父元素不会，并且也会自行关闭。

如果有任何帮助，我将不胜感激!!!

这是我的代码:

<ul id="accordion">    
<ul class="parent">
    <li>
        <a href="#" class="slide">CMS</a>

        <ul class="child">
            <li><a href="/learn/intro-to-cms">Intro to CMS</a></li>
            <li><a href="/learn/specific-cms">Specific CMS</a></li> 
            <li><a href="/learn/installing-a-cms">Installing a CMS</a></li> 
        </ul>

     </li>
</ul>

<ul class="parent">
        <li>
            <?php
            if ($this_page=="Customising-Google-Forms" || $this_page=="Web-Event-Notes"){
            echo "<a href=\"#\" class=\"slide current\">Other</a>";
            }else{
            echo "<a href=\"#\" class=\"slide\">Other</a>";
            }
            ?>

        <ul class="child">
            <?php
            if ($this_page=="Customising-Google-Forms"){
            echo "<li class=\"current\"><a href=\"/learn/customising-google-forms\">Customising-google-forms</a></li>";
            }else{
            echo "<li><a href=\"/learn/customising-google-forms\">Customising Google Forms</a></li>";
            }
            ?>
            <?php
            if ($this_page=="Web-Event-Notes"){
            echo "<li class=\"current\"><a href=\"/learn/web-event-notes\">Web Event Notes</a></li>";
            }else{
            echo "<li><a href=\"/learn/web-event-notes<\">Web-Event-Notes</a></li>";
            }
            ?>
        </ul>

     </li>
</ul>

<script type="text/javascript">
$(function(){
// hide all links on load
$('ul.child').hide();
// for image
// $("a.slide:first").css("background-image","url('path')");

$('ul.parent a.slide').click(function(){
    $('ul.parent a.slide').css("color","#000");

    $('ul.parent a.slide').hover(function(){
        $(this).css("color","#ef492f");
    });

    $('ul.parent a.slide').mouseout(function(){
        $(this).css("color","#000");
    });

    $(this).mouseout(function(){
        $(this).css("color","#000");
    });

    $(this).css("color","#000");


    // slide all up
    $('ul.child').slideUp('slow');

    // show the links of current heading
    $(this).next().find('a').show();

    // slide down current heading
    $(this).next().slideDown('fast');

    // prevent default action
    return false;
});

if($("ul li a").hasClass("current")) {
$(this).closest("ul").slideDown("fast") //open the menu
}

});

</script>

Answer 1

在我看来，实现此目的的最佳方法是创建一个包含链接的 PHP 数组，然后从中构建一个 html 菜单。通过这种方式，PHP 可以根据 url 参数控制哪些链接将包含“当前”类。最后一步将是 jquery 来获取 '.current' 列表项并使其可见。下面的内容可能看起来工作量很大，但当你掌握它时，它会非常强大且可重用:)

//Grab the page parameter somehow.. below = example
$page = $_GET['page'];

//Build menu array containing links and subs
$items = Array( 
    //highest level
    'cms' => Array(
        'title' => 'CMS',
        //Array containing submenu items for cms
        'subs' => Array(
            'intro-to-cms' => Array('title' => 'Intro to CMS'),
            'specific-cms' => Array('title' => 'Specific CMS'),
            'installing-a-cms' => Array('title' => 'Installing a CMS')
        ),
    )
);

//Display the menu
echo navlinks($items, $page);

/**
 * Recursive function creates a navigation out of an array
 * @param type $items
 * @return string containing navigationlist
 */
function navlinks($items, $page=false)
{
  $html = '<ul>';
  foreach ($items AS $uri => $info) {
    //Check if the pagename is the same as the link name and set it to current when it is
    $html .= '<li'.($info['title'] == $page ? ' class="current"' : '').'>';
    echo '  <a href="' . $uri . '">' . $info['title'] . '</a>';
    //If the link has a sub array, recurse this function to build another list in this listitem
    if (isset($info['subs']) && is_array($info['subs'])) {
      $html .= navlinks($info['subs']);
    }
    $html .= '</li>';
  }
  $html .= '</ul>';
  return $html;
}