仅在 MVC 中使用 div 在没有表格标记的情况下呈现布局和表格对齐方式答案

【问题标题】：Rendering in Layout and table like alignment without table tag using div only in MVC仅在 MVC 中使用 div 在没有表格标记的情况下呈现布局和表格对齐方式
【发布时间】：2017-04-01 07:11:50
【问题描述】：

_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 . 在手风琴菜单中 - 当单击子菜单时，它应该保持选中状态，因为您会看到它在页面加载后关闭

请帮我详细回复

不能使用引导程序 - 只能使用 css3、jquery 和 razor 语法

【问题讨论】：

大家好。 css 的第一个目标是通过 padding 完成的。但任何人都可以帮助实现第二个目标
通过 JsFiddle 或 SO 代码编辑器分享更新的代码。
嗨 kumar，它需要一个服务器端脚本，我不能在 jsfiddle 中给你。所有代码都在这里给出

标签： javascript jquery html css asp.net-mvc

【解决方案1】：

为了使选中的手风琴子菜单保持打开状态，您应该将“multiple”选项设置为 true。将 javascript 的最后一行更改为：

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

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

检查JSFiddle。

【讨论】：

如果您希望在页面加载时打开其中一个子菜单，您应该将 display: 块添加到您想要打开的 ul 子菜单标签。例如：<ul class="submenu" style="display: block;">
因为页面正在完全加载，我们不能使用 ajax。我们必须从控制器的操作方法中发送子菜单的值以使其处于活动状态。但是非常感谢您的建议