CSS下拉菜单通过PHP,逻辑打败了我


CSS Dropdown menu through PHP, logic defeats me

今天早上我的大脑似乎不想工作。。我有以下数组:

private $nav_pages = [['0', 'Home', 'home'],
                      ['0', 'About Us', 'about'],
                      ['0', 'Our Services', 'services'],
                      ['1', 'PROCURE TO PAY (P2P)', 'procure'],
                      ['1', 'ORDER TO CASH (02C)', 'cash'],
                      ['1', 'GENERAL ACCOUNTING', 'general'],
                      ['2', 'Charting of Accounts', 'charting'],
                      ['2', 'General Ledger Maintenance', 'maintenance'],
                      ['2', 'Accounts Receivable Services', 'receivable'],
                      ['2', 'Accounts Payable Services', 'payable'],
                      ['2', 'Reconciliation of Bank Accounts and Credit Cards', 'reconciliation'],
                      ['2', 'Preparing Financial Statements', 'statements'],
                      ['2', 'Payroll Processing', 'payroll'],
                      ['1', 'CLOSING & REPORTING', 'closing'],
                      ['0', 'How It Works', 'how-it-works'],
                      ['0', 'Contact Us','contact'],
                      ['0', 'Careers', 'careers']];

然后将其提供给php页面,该页面旨在布局多层纯css下拉菜单。。php页面代码为:

<ul class="<?php echo $ul_class; ?>">
<?php $this_layer = 0;
// place array content into variables
foreach ($links as $link) {
    $item_layer  = $link[0];
    $item_string = $link[1];
    $item_link   = $link[2];
    if ($item_layer > $this_layer) { ?>
        <ul>
    <?php $this_layer++; }
    elseif ($item_layer == $this_layer) { ?>
        <li class="<?php echo $item_link; ?>">
            <a class="<?php echo $item_link; ?>"
               href="/<?php echo $item_link; ?>">
                <?php echo $item_string; ?>
            </a>
        </li>
    <?php }
    elseif ($item_layer < $this_layer) { ?>
        </li></ul>
    <?php $this_layer--; } ?>
<?php } ?>

但是,输出不正确,因为上面的代码总是在第二层准备关闭之前关闭包含第二层的列表项。如果这有道理的话。。

<ul class="pages_nav">
<li class="home">
    <a class="home"
       href="/home">
        Home                
    </a>
</li>
<li class="about">
    <a class="about"
       href="/about">
        About Us                
    </a>
</li>
<li class="services">
    <a class="services"
       href="/services">
        Our Services                
    </a>
</li>
<ul>
    <li class="cash">
        <a class="cash"
           href="/cash">
            ORDER TO CASH (02C)                
        </a>
    </li>
    <li class="general">
        <a class="general"
           href="/general">
            GENERAL ACCOUNTING                
        </a>
    </li>
    <ul>
        <li class="maintenance">
            <a class="maintenance"
               href="/maintenance">
                General Ledger Maintenance                
            </a>
        </li>
        <li class="receivable">
            <a class="receivable"
               href="/receivable">
                Accounts Receivable Services                
            </a>
        </li>
        <li class="payable">
            <a class="payable"
               href="/payable">
                Accounts Payable Services                
            </a>
        </li>
        <li class="reconciliation">
            <a class="reconciliation"
               href="/reconciliation">
                Reconciliation of Bank Accounts and Credit Cards                
            </a>
        </li>
        <li class="statements">
            <a class="statements"
               href="/statements">
                Preparing Financial Statements               
            </a>
        </li>
        <li class="payroll">
            <a class="payroll"
               href="/payroll">
                Payroll Processing                
            </a>
        </li>
        </li></ul>
    </li></ul>
<li class="contact">
    <a class="contact"
       href="/contact">
        Contact Us                
    </a>
</li>
<li class="careers">
    <a class="careers"
       href="/careers">
        Careers                
    </a>
</li>

解决方案:

<ul class="<?php echo $ul_class; ?>">
<?php $this_layer = 0;
// place array content into variables
foreach ($links as $link) {
    $item_layer  = $link[0];
    $item_string = $link[1];
    $item_link   = $link[2];
    // check if link needs to be manipulated
    switch($do) {
        case 'strtolower':
            $item_string = strtolower($item_string);
            break;
        case 'strtoupper':
            $item_string = strtoupper($item_string);
            break;
    } ?>
    <?php if ($item_layer > $this_layer) { ?>
        <ul>
        <li class="<?php echo $item_link; ?>">
            <a class="<?php echo $item_link; ?>"
               href="/<?php echo $item_link; ?>">
                <?php echo $item_string; ?>
            </a>
    <?php $this_layer++; }
    elseif ($item_layer == $this_layer) { ?>
        </li><li class="<?php echo $item_link; ?>">
            <a class="<?php echo $item_link; ?>"
               href="/<?php echo $item_link; ?>">
                <?php echo $item_string; ?>
            </a>
    <?php }
    elseif ($item_layer < $this_layer) { ?>
        </li></ul></li><li class="<?php echo $item_link; ?>">
        <a class="<?php echo $item_link; ?>"
           href="/<?php echo $item_link; ?>">
            <?php echo $item_string; ?>
        </a>
        <?php $this_layer--; } ?>
<?php } ?>

永远不要关闭li标记,在添加时关闭它

foreach ($links as $link) {
    if ($item_layer > $this_layer) { 
        echo '<ul><li> ......';
        this_layer++; 
    }elseif ($item_layer == $this_layer) {
        echo '</li><li>......';
    }elseif ($item_layer < $this_layer) {
        echo '</li></ul><li>......';
        $this_layer--; 
    }
}

最后,您可能需要在foreach之外添加一个echo '</li></ul>'来关闭所有

不得不稍微修改代码,通常我以树形形式组织php菜单结构,使其更容易解析为html菜单,但这里是:

<ul class="<?php echo $ul_class; ?>">
<?php 
$this_layer = 0;
$closeit = false;
// place array content into variables
foreach ($nav_pages as $link) {
    $item_layer  = $link[0];
    $item_string = $link[1];
    $item_link   = $link[2];
    if ($item_layer > $this_layer) { 
      // Changing level, dont close the previous li
      ?><ul><?php 
      $closeit = false;
      $this_layer++; 
    }
    if ($item_layer == $this_layer) { 
      // Same level, check if you need to close previous li
      if ($closeit) {
        ?></li><?php
      }
      // Render the li
    ?>
  <li class="<?php echo $item_link; ?>">
    <a class="<?php echo $item_link; ?>"
        href="/<?php echo $item_link; ?>">
      <?php echo $item_string; ?>
    </a>
    <?php 
      // Close it on next loop
      $closeit = true;
    }
    elseif ($item_layer < $this_layer) { 
      // Changing layer back down, close the previous li and the current level ul
      ?>
  </li>
</ul>
    <?php
      $this_layer--; 
    } 
} 
// Finished loop, there should still be a li waiting to be closed
if ($closeit) { 
  ?></li><?php 
}
// Close menu
?>
</ul>

应该有效,如果不是,请告诉我

建议的php菜单结构:

$menu = array(
    array(
        "url"=>"/place.php",
        "text"=>"Go to place"
    ),
    array(
        "url"=>"/place2.php", // not necessary
        "text"=>"with submenu",
        "children"=>array(
            array(
                "url"=>"/placewithinplace2.php",
                "text"=>"submenu item"
            )
        )
    )
);