3

jQuery と PHP の知識がほとんどないため、アクティブなページが開いているときにリンクが「アクティブ」として表示され、アクティブなページではスライダー メニューが正しいセクションで開いたままになるアコーディオン メニューをほぼ完成させました。

下部のリンクにいくつかの 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>
4

1 に答える 1

1

私の意見では、これを実現する最善の方法は、リンクを含む PHP 配列を作成し、そこから HTML メニューを作成することです。このようにして、PHP は URL パラメータに基づいて「現在の」クラスを保持するリンクを制御できます。最後のステップは、「.current」リスト項目を取得して表示するための jquery です。以下は大変な作業のように思えるかもしれませんが、それを取得すると、強力で再利用可能になります:)

//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;
}
于 2012-09-24T00:51:17.863 に答える