Question

下午好。对不起我的英语不好。我想制作一个垂直菜单，其中的子部分出现在一个地方 - 菜单的右侧。

 __________________________
|                         |
| SECTION1    subsection1 |
|___________  subsection2 |
|           | subsection3 |
| SECTION2  |             |
|___________|             |
|           |             |
| SECTION3  |             |
|___________|             |
|           |             |
| SECTION4  |             |
|___________|_____________|

 __________________________
|           |             |
| SECTION1  | subsection8 |
|___________| subsection9 |
|           | subsection7 |
| SECTION2  |             |
|___________|             |
|           |             |
| SECTION3  |             |
|___________|             |
|                         |
| SECTION4                |
|_________________________|

另外，我不想让小节完全消失 - 只有当我点击另一个部分时。对不起我的英语不好。（Россиярулит！）

感谢。

代码，生成垂直菜单（Opencart原创）

<div class="box">
  <div class="box-content">
    <ul class="box-category">
      <?php foreach ($categories as $category) { ?>
      <li>
        <?php if ($category['category_id'] == $category_id) { ?>
        <a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
        <?php } else { ?>
        <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
        <?php } ?>
        <?php if ($category['children']) { ?>
        <ul>
          <?php foreach ($category['children'] as $child) { ?>
          <li>
            <?php if ($child['category_id'] == $child_id) { ?>
            <a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
            <?php } else { ?>
            <a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
            <?php } ?>
          </li>
          <?php } ?>
        </ul>
        <?php } ?>
      </li>
      <?php } ?>
    </ul>
  </div>
</div>

css（Opencart original）

/* box category */
ul.box-category, ul.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.box-category > li:first-child {
padding: 0px 8px 8px 0px;
}
ul.box-category > li {
padding: 8px 8px 8px 0px;
}
ul.box-category > li + li {
border-top: 1px solid #EEEEEE;
}
ul.box-category > li > a {
text-decoration: none;
color: #333;
}
ul.box-category > li ul {
display: none;
}
ul.box-category > li a.active {
font-weight: bold;
}
ul.box-category > li a.active + ul {
display: block;
}
ul.box-category > li ul > li {
padding: 5px 5px 0px 10px;
}
ul.box-category > li ul > li > a {
text-decoration: none;
display: block;
}
ul.box-category > li ul > li > a.active {
font-weight: bold;
}

我的代码：

<div class="box">
<?php foreach ($categories as $category) { ?>

    <div class="box-category">
       <?php if ($category['category_id'] == $category_id) { ?>
         <div class="active"><a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a></div>
       <?php } else { ?>
         <div><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div>
       <?php } ?>
    </div>

    <div class="category-list">
        <?php if ($category['children']) { ?>
         <?php foreach ($category['children'] as $child) { ?>
          <?php if ($child['category_id'] == $child_id) { ?>
            <a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
          <?php } else { ?>
            <a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
          <?php } ?>
         <?php } ?>
        <?php } ?>
   </div>

<?php } ?>
</div>

我的css

.box-category {
width: 218px;
}

.box-category div {
height: 25px;
cursor: pointer;
}

.box-category div a {
margin-left: 8px;
}

.box-category div.active {
height: 25px;
cursor: pointer;
}
.box-category div a.active {
margin-left: 14px;
}

.category-list {
display: none;
width: 218px;
float: left;
}

.category-list a {
color: white;
}

使用此代码，我只看到主要部分。尝试：

div.box-category div.active + div.category-list {
display: block;
}

和

.box-category:active + .category-list {
display: block;
}

但它不起作用。甚至试过java：

<script type="text/javascript">
if ($(".box-category > div.active").length > 0) {
    $('.category-list').css("display", "block");
}
</script>

没用。

垂直菜单，子部分出现在一个地方

0 个答案: