Question

_layout.cshtml

<body>
    <div>
        <ul id="accordion" class="accordion">
            <li>
                <div class="link">Web Design</div>
                <ul class="submenu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </li>
            <li>
                <div class="link">Coding</div>
                <ul class="submenu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </li>
         </ul>
    </div>

css文件

.accordion {
  width: 100%;
  max-width: 260px;
  background: #FFF;
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  position: absolute;
}

.accordion .link {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 42px;
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-right: 1px solid #CCC;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}


/*Submenu*/

.submenu {
   padding:0px;
  display: none; 
  font-size: 14px;
}

.submenu li { border-bottom: 1px solid #4b4a5e; }

.submenu a {
  display: block;
  text-decoration: none;
  color: #23222d;
  background-color:#c9c7d5;
  padding: 12px;
  padding-left: 42px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.submenu a:hover {
  background: #b63b4d;
  color: #FFF;
}

JS档案

$(document).ready(function () {

    $(function () {
        var Accordion = function (el, multiple) {
            this.el = el || {};
            this.multiple = multiple || false;


            var links = this.el.find('.link');

            links.on('click', { el: this.el, multiple: this.multiple }, this.dropdown)
        }

        Accordion.prototype.dropdown = function (e) {
            var $el = e.data.el;
            $this = $(this),
            $next = $this.next();

            $next.slideToggle();
            $this.parent().toggleClass('open');

            if (!e.data.multiple) {
                $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
            };
        }

        var accordion = new Accordion($('#accordion'), false);
    });
});

目标

1。对齐方式不正确，目前就像--- https://ibb.co/fiUOrF 它应该像---- https://ibb.co/e5hbBF ---不能使用表格标签 - 侧边栏之间的分隔线（线条）和内容很重要 - 它应该出现--- 这已经完成

手风琴菜单中的

2。 - 当点击子菜单时，它应保持选中状态，因为您在页面加载后看到它已关闭

请帮我详细回复

无法使用bootstrap - 只有css3，jquery和razor语法

Answer 1

为了保持选定的手风琴子菜单处于打开状态，您应该设置多个＆＃39;选项为true。将您的javascript的最后一行更改为：

    var accordion = new Accordion($('#accordion'), true);

更新：如果您希望在页面加载时打开其中一个子菜单，则应将display：block添加到要打开的ul子菜单标记中。例如：<ul class="submenu" style="display: block;">

检查JSFiddle。

在布局和表中呈现像对齐而没有使用表格标记的表格仅在MVC中使用div

1 个答案: