Question

在下面的示例中，我有一个标头，左边是徽标容器，中间是菜单，右边是一个按钮。在示例中，菜单包含5个顶级项目和2个子菜单。

<div class="container">
   <div class="logo_container">
      <img src="logo.png" />
   </div>
   <div id="top-navigation">
      <div id="top-menu-nav">
         <ul id="top-menu">
            <li class="top-item">Top Item 1</li>
            <li class="top-item">Top Item 2
               <ul>
                  <li class="sub-item">Sub-Item 1</li>
                  <li class="sub-item">Sub-Item 2</li>
                  <li class="sub-item">Sub-Item 3</li>
                  <li class="sub-item">Sub-Item 4</li>
               </ul>
            </li>
            <li class="top-item">Top Item 3
               <ul>
                  <li class="sub-item">Sub-Item 5</li>
                  <li class="sub-item">Sub-Item 6</li>
                  <li class="sub-item">Sub-Item 7</li>
                  <li class="sub-item">Sub-Item 8</li>
               </ul>
            </li>
            <li class="top-item">Top Item 4</li>
            <li class="top-item">Top Item 5</li>
         </ul>
      </div>
      <ul id="menu-button">
         <li class="menu-button-cta">Button</li>
      </ul>
   </div>
</div>

由于可能添加或删除了顶级项目，因此我想根据菜单中顶级项目的数量来更改父元素的宽度。

例如：

<ul id="top-menu">具有5个<li class="top-item"> = .container {width: 100%;}
<ul id="top-menu">具有4个<li class="top-item"> = .container {width: 90%;}
<ul id="top-menu">具有3个<li class="top-item"> = .container {width: 80%;}

有没有办法在CSS或jQuery中做到这一点？

Answer 1

您可以使用class ThumbnailsAdapter( private val mContext: Context, private val list: ArrayList<Image> ) : RecyclerView.Adapter<RecyclerView.ViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder { return when (viewType) { R.layout.z_thumbnail -> { val view = LayoutInflater.from(mContext) .inflate(R.layout.z_thumbnail, parent, false) ThumbnailViewHolder(view) } R.layout.z_thumbanail_add -> { val view = LayoutInflater.from(mContext) .inflate(R.layout.z_thumbanail_add, parent, false) PlaceholderViewHolder(view) } else -> throw IllegalArgumentException("unknown view type $viewType") } } override fun getItemCount(): Int { return list.size + 1 } override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) { when (getItemViewType(position)) { R.layout.z_thumbnail -> (holder as ThumbnailViewHolder).bind(list[position].path) R.layout.z_thumbanail_add -> (holder as PlaceholderViewHolder).bind() } } override fun getItemViewType(position: Int): Int { return when (position) { list.size -> R.layout.z_thumbanail_add else -> R.layout.z_thumbnail } } inner class ThumbnailViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { private val imageView = itemView.findViewById<ImageView>(R.id.thumbnail) fun bind(path: String) { Glide.with(mContext).load(path).into(imageView) } } inner class PlaceholderViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { private val btn = itemView.findViewById<ImageView>(R.id.add_images_btn) fun bind() { btn.setOnClickListener { //Do your logic here for the button } } } }在jquery中执行此操作，例如：

.children().length

然后是CSS：

$("ul.top-menu").each(function() {
    $(this).addClass(".container-" + $(this).children(".top-item").length);
});

Answer 2

这是我使用jQuery的解决方案。首先，计算孩子的身长，然后相应地应用样式。

var lengthOfChildren = $("#top-menu").children().length;
switch (lengthOfChildren) {
  case 3:
    $(".container").css("width", "80%");
    break;
  case 4:
    $(".container").css("width", "90%");
    break;
  default:
    $(".container").css("width", "100%");
}

通过其子元素数量更改父宽度？

2 个答案: